@magic-xpa/angular 4.1300.0-dev4130.28 → 4.1300.0-dev4130.281

package/fesm2022/magic-xpa-angular.mjs

@@ -1,28 +1,27 @@
 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, inject, Injector, createNgModule, ViewContainerRef, ChangeDetectionStrategy, Component, Directive, EventEmitter, HostListener, Output, Input, ViewChild, input, output, ElementRef, viewChild, ChangeDetectorRef, InjectionToken, DestroyRef, Renderer2, Pipe, effect, 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 { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2$3 from 'ng-dynamic-component';
+import * as i1$1 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, MsgInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
+import { Subject, EMPTY, fromEvent, Observable } from 'rxjs';
 import { filter, map, debounceTime, take } from 'rxjs/operators';
-import { Subject, EMPTY, fromEvent } from 'rxjs';
-import { __decorate, __metadata } from 'tslib';
-import * as i2$1 from '@angular/cdk/drag-drop';
+import * as i2 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 { Title } from '@angular/platform-browser';
+import { HttpClient, 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 { Platform } from '@angular/cdk/platform';
+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
@@ -239,6 +238,63 @@ var HtmlClasses;
     HtmlClasses["HintColor"] = "hintcolor";
 })(HtmlClasses || (HtmlClasses = {}));
 
+/**
+ * Notifies Angular that Magic state changed outside of its knowledge.
+ *
+ * The WebClient runs zoneless, so Angular no longer re-renders the application
+ * after every asynchronous task. Change detection is triggered only by Angular's
+ * own APIs - a template event binding, a signal write, `markForCheck()` and so on.
+ *
+ * Magic drives the UI from sources Angular cannot observe: DOM listeners registered
+ * through `Renderer2`, the engine's event loop, and socket callbacks. Every such
+ * source calls {@link notify}, and the Magic components refresh themselves in response.
+ *
+ * Application code can use this service for the same purpose. Call {@link notify}
+ * after changing component state from a callback Angular does not control - a
+ * `setTimeout`, a `Promise`, a `fetch` response or a third-party widget event:
+ *
+ * ```ts
+ * export class MyForm extends TaskBaseMagicComponent {
+ *   private readonly magicChangeDetection = inject(MagicChangeDetectionService);
+ *
+ *   override mgOnLoad(): void {
+ *     setTimeout(() => {
+ *       this.statusText = 'Ready';
+ *       this.magicChangeDetection.notify();
+ *     }, 1000);
+ *   }
+ * }
+ * ```
+ *
+ * Notifications are coalesced by Angular's scheduler, so calling {@link notify}
+ * several times in a row still results in a single refresh.
+ */
+class MagicChangeDetectionService {
+    /**
+     * @ignore
+     */
+    changedSubject = new Subject();
+    /**
+     * Emits whenever Magic state changed and the views should be refreshed.
+     * Subscribers are expected to mark their view for check.
+     */
+    changed = this.changedSubject.asObservable();
+    /**
+     * Notify Angular that state which the templates depend on has changed.
+     */
+    notify() {
+        this.changedSubject.next();
+    }
+    /** @nocollapse */ static ɵfac = function MagicChangeDetectionService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicChangeDetectionService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicChangeDetectionService, factory: MagicChangeDetectionService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicChangeDetectionService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+
 /**
  * @ignore
  */
@@ -279,6 +335,9 @@ class EngineMagicService {
     //TODO - unregister
     refreshDom = new Subject();
     interactiveCommands = new Subject();
+    // Injected as a field rather than a constructor parameter so that the public
+    // constructor signature stays unchanged for anyone extending this service.
+    magicChangeDetection = inject(MagicChangeDetectionService);
     startMagicEngine(httpClient, args) {
         this.magicBridge.registerExecuteCommandsCallback(data => {
             if (!this.isStub) {
@@ -294,11 +353,17 @@ class EngineMagicService {
                     console.log('moving to stub mode');
                     this.isStub = true;
                 }
+                finally {
+                    // The engine finished a batch of UI commands. Running zoneless, this is the
+                    // single point where every server-driven change becomes visible to Angular.
+                    this.magicChangeDetection.notify();
+                }
             }
         });
         this.magicBridge.registerInteractiveCallback(data => {
             if (!this.isStub) {
                 this.interactiveCommands.next(data);
+                this.magicChangeDetection.notify();
             }
         });
         this.magicBridge.Initialize(httpClient, args);
@@ -309,6 +374,11 @@ class EngineMagicService {
     insertEvent(guiEvent) {
         if (!this.isStub)
             this.magicBridge.insertEvent(guiEvent);
+        // Every Magic UI event - from the DOM listeners registered by MagicDirective and
+        // its subclasses, from the accessor service, and from the overlay service - reaches
+        // the engine through here. Renderer2 listeners do not notify Angular's scheduler on
+        // their own, so this is where an interaction becomes a change-detection trigger.
+        this.magicChangeDetection.notify();
     }
     GetRangedValue(taskId, controlName, value) {
         return this.magicBridge.GetRangedValue(taskId, controlName, value);
@@ -430,12 +500,11 @@ class ComponentListMagicService {
  * @ignore
  */
 class CommandsCollectorMagicService {
-    magic;
     count = 0;
     commands = new List();
     subscription = null;
-    constructor(magic) {
-        this.magic = magic;
+    magic = inject(EngineMagicService);
+    constructor() {
     }
     startCollecting() {
         this.count++;
@@ -460,7 +529,7 @@ 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__) { return new (__ngFactoryType__ || CommandsCollectorMagicService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
@@ -468,7 +537,7 @@ class CommandsCollectorMagicService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: EngineMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * @ignore
@@ -522,32 +591,21 @@ class MagicLazyLoaderService {
  * Service for managing subforms and routing
  */
 class SubformMagicService {
-    task;
-    activatedRoute;
-    componentList;
-    pendingCommandsCollector;
-    router;
-    routerCommandsMagicService;
-    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) {
-        this.task = task;
-        this.activatedRoute = activatedRoute;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.router = router;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-        this.componentListMagicService = componentListMagicService;
-        this.loader = loader;
-        this.injector = injector;
-        this.compiler = compiler;
+    task = inject(TaskMagicService);
+    activatedRoute = inject(ActivatedRoute);
+    componentList = inject(ComponentListMagicService);
+    pendingCommandsCollector = inject(CommandsCollectorMagicService);
+    router = inject(Router);
+    routerCommandsMagicService = inject(RouterCommandsMagicService);
+    componentListMagicService = inject(ComponentListMagicService);
+    loader = inject(MagicLazyLoaderService);
+    injector = inject(Injector);
+    constructor() {
     }
     /**
      * Finds and returns the component according to the subform name
@@ -608,8 +666,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,25 +806,17 @@ 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__) { return new (__ngFactoryType__ || SubformMagicService)(); };
     /** @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); })();
+    }], () => [], null); })();
 
 /**
  * Mock component, implements routing by connecting the requested URL with the appropriate Magic task
  */
 class RouterContainerMagicComponent {
-    activatedRoute;
-    router;
-    magic;
-    containerTaskService;
-    viewContainerRef;
-    componentList;
-    pendingCommandsCollector;
-    routerCommandsMagicService;
     componentRef = null;
     parentMgSubformService = null;
     static lastRoute = "/";
@@ -775,6 +824,14 @@ class RouterContainerMagicComponent {
     static get LastRoute() {
         return RouterContainerMagicComponent.lastRoute;
     }
+    activatedRoute = inject(ActivatedRoute);
+    router = inject(Router);
+    magic = inject(EngineMagicService);
+    containerTaskService = inject(TaskMagicService);
+    viewContainerRef = inject(ViewContainerRef);
+    componentList = inject(ComponentListMagicService);
+    pendingCommandsCollector = inject(CommandsCollectorMagicService);
+    routerCommandsMagicService = inject(RouterCommandsMagicService);
     /**
      *
      * @param changeDetectorRef
@@ -785,16 +842,7 @@ class RouterContainerMagicComponent {
      * @param componentList
      * @param pendingCommandsCollector
      */
-    constructor(activatedRoute, router, magic, containerTaskService, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.magic = magic;
-        this.containerTaskService = containerTaskService;
-        this.viewContainerRef = viewContainerRef;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-    }
+    constructor() { }
     /**
      * Initialization
      */
@@ -872,8 +920,8 @@ 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__) { return new (__ngFactoryType__ || RouterContainerMagicComponent)(); };
+    /** @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 +929,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 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src/ui/router-container.magic.component.ts", lineNumber: 24 }); })();
 
 /**
  * @ignore
@@ -1003,37 +1052,81 @@ class GuiInteractiveExecutor {
     }
 }
 
-let BaseMagicOverlayContainer = class BaseMagicOverlayContainer {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], BaseMagicOverlayContainer.prototype, "ModalComp", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], BaseMagicOverlayContainer.prototype, "ModalCompParameters", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], BaseMagicOverlayContainer.prototype, "onClose", void 0);
-BaseMagicOverlayContainer = __decorate([
-    Input(),
-    Output()
-], BaseMagicOverlayContainer);
+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;
+    }
+}
+
+/**
+ * Abstract base for Magic overlay container components.
+ * Concrete classes must implement these members using Angular signal APIs (input/output).
+ * The class is kept as an abstract class (not an interface) so that instanceof checks
+ * in MagicOverlayContainerWrapper continue to work at runtime.
+ */
+class BaseMagicOverlayContainer {
+}
 
 /**
  * Directive for setting  ViewContainerRef on element
  */
 class MagicViewContainerRef {
-    vcRef;
-    constructor(vcRef) {
-        this.vcRef = vcRef;
+    vcRef = inject(ViewContainerRef);
+    constructor() {
         // For angular 10 -  find the component from the views
         let comp = (this.vcRef._hostLView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
-        comp.setViewContainerRef(vcRef);
+        comp.setViewContainerRef(this.vcRef);
     }
-    /** @nocollapse */ static ɵfac = function MagicViewContainerRef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵfac = function MagicViewContainerRef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicViewContainerRef)(); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicViewContainerRef, [{
@@ -1042,54 +1135,54 @@ class MagicViewContainerRef {
                 selector: '[magicViewContainerRef]',
                 standalone: false
             }]
-    }], () => [{ type: i0.ViewContainerRef }], null); })();
+    }], () => [], null); })();
 
 const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_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_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 15);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_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_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 16);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_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_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 17);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_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_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_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_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 19, 2);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "button", 20);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_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 +1235,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 +1254,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 +1273,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 +1310,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      */
     getShowTitleBar() {
         if (this.componentRef != undefined) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             return comp.ShowTitleBar();
         }
     }
@@ -1231,7 +1324,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 +1333,9 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is resizable, false otherwise.
      */
     IsResizable() {
-        let comp = this.componentRef.instance;
+        if (!this.componentRef)
+            return false;
+        let comp = this.getOverlayProps();
         return comp.IsResizable();
     }
     /**
@@ -1248,7 +1343,9 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is movable, false otherwise.
      */
     IsMovable() {
-        let comp = this.componentRef.instance;
+        if (!this.componentRef)
+            return false;
+        let comp = this.getOverlayProps();
         return comp.IsMovable();
     }
     /**
@@ -1342,6 +1439,19 @@ 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;
+        // The properties come either from a MagicModalProperties object or from a component that implements MagicModalInterface itself.
+        if (!(obj instanceof MagicModalProperties) && typeof obj?.ShowTitleBar !== 'function') {
+            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)(_c1$1, 5);
@@ -1352,9 +1462,8 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
             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) {
-            const _r1 = i0.ɵɵgetCurrentView();
             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.ɵɵ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);
@@ -1383,48 +1492,48 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             i0.ɵɵconditional(ctx.getShowTitleBar() ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, 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%}"] });
+        } }, dependencies: [i1.NgStyle, i2.CdkDragHandle, i2.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,
-        args: [{ selector: 'app-magic-overlay-container', template: `
-    <div class="boundary-line">
-    
-      <div class="modal-background" (click)="OnBackgroundClick()">
-        @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()">
-    
-        @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>
-        }
-    
-        @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>
-          </div>
-        </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"] }]
+        args: [{ selector: 'app-magic-overlay-container', template: `
+    <div class="boundary-line">
+
+      <div class="modal-background" (click)="OnBackgroundClick()">
+        @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()">
+
+        @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>
+        }
+
+        @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>
+          </div>
+        </div>
+      </div>
+    </div>
+    `, 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 }]
@@ -1444,7 +1553,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: 64 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 67 }); })();
 
 /**
  * Service managing overlay windows
@@ -1468,16 +1577,18 @@ class BaseMagicConfirmComponent {
     /**
      * title of the component
      */
-    title;
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     /**
      * message of the component
      */
-    message;
+    message = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
     /**
      * onClose Event - to be raised when the component is closed
      * should pass true when OK is pressed and false when cancel is pressed
      */
-    onClose = new EventEmitter();
+    onClose = output();
     /**
      * raises close Event
      * @param result true when OK is pressed and false when cancel is pressed
@@ -1487,19 +1598,13 @@ 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: [1, "title"], message: [1, "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 }]
-    }], null, { title: [{
-            type: Input
-        }], message: [{
-            type: Input
-        }], onClose: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 13 }); })();
+        args: [{ selector: 'mg-base-confirm', template: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false }]
+    }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] }); })();
+(() => { (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
@@ -1508,16 +1613,18 @@ class BaseMagicAlertComponent {
     /**
      * title of the component
      */
-    title;
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     /**
      * message of the component
      */
-    message;
+    message = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
     /**
      * onClose Event - to be raised when the component is closed
   
      */
-    onClose = new EventEmitter();
+    onClose = output();
     /**
      * close magic alert
      */
@@ -1525,32 +1632,24 @@ 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: [1, "title"], message: [1, "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 }]
-    }], null, { title: [{
-            type: Input
-        }], message: [{
-            type: Input
-        }], onClose: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src/ui/components/base-magic-alert.component.ts", lineNumber: 14 }); })();
+        args: [{ selector: 'mg-base-alert', template: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false }]
+    }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src/ui/components/base-magic-alert.component.ts", lineNumber: 16 }); })();
 
 /**
  * Directive for setting focus on element
  */
 class MagicFocusDirective {
-    hostElement;
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-    }
+    hostElement = inject(ElementRef);
+    constructor() { }
     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__) { return new (__ngFactoryType__ || MagicFocusDirective)(); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicFocusDirective, [{
@@ -1559,30 +1658,29 @@ class MagicFocusDirective {
                 selector: '[magicFocus]',
                 standalone: false
             }]
-    }], () => [{ type: i0.ElementRef }], null); })();
+    }], () => [], null); })();
 
 const _c0$2 = ["overlayContainerWrapper"];
 class MagicOverlayContainerWrapper {
-    componentListMagicService;
-    magicLazyModuleLoader;
-    injector;
-    changeDetectorRef;
-    compiler;
     /**
      *
      */
-    Component = null;
+    Component = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "Component" }] : /* istanbul ignore next */ []));
     /**
      *
      */
-    Parameters = {};
-    OverlayTypeParam;
-    onClose = new EventEmitter();
+    Parameters = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "Parameters" }] : /* istanbul ignore next */ []));
+    OverlayTypeParam = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "OverlayTypeParam" }] : /* istanbul ignore next */ []));
+    onClose = output();
     /**
      * HTML to be displayed in the modal window
      */
     overlayContentViewContainerRef;
-    overlayContainerWrapperElementRef;
+    overlayContainerWrapperElementRef = viewChild.required('overlayContainerWrapper', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayContainerWrapperElementRef" }] : /* istanbul ignore next */ []));
     /**
      * @ignore
      * contais data of allowed base components to use
@@ -1592,32 +1690,26 @@ class MagicOverlayContainerWrapper {
         [OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
         [OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
     ]);
-    /**
-     *
-     * @param componentFactoryResolver
-     */
-    constructor(componentListMagicService, magicLazyModuleLoader, injector, changeDetectorRef, compiler) {
-        this.componentListMagicService = componentListMagicService;
-        this.magicLazyModuleLoader = magicLazyModuleLoader;
-        this.injector = injector;
-        this.changeDetectorRef = changeDetectorRef;
-        this.compiler = compiler;
+    componentListMagicService = inject(ComponentListMagicService);
+    magicLazyModuleLoader = inject(MagicLazyLoaderService);
+    injector = inject(Injector);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    constructor() {
     }
     /**
      *
      */
     ngOnInit() {
-        let moduleRef = this.componentListMagicService.getModuleRef(this.Parameters.MagicFormName);
+        let moduleRef = this.componentListMagicService.getModuleRef(this.Parameters().MagicFormName);
         if (moduleRef == null) {
-            let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(this.Parameters.MagicFormName);
+            let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(this.Parameters().MagicFormName);
             if (lazyLoadModule != null) {
                 const Magic = 'Magic';
                 const Module = 'Module';
                 // 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);
                 });
             }
@@ -1629,11 +1721,18 @@ class MagicOverlayContainerWrapper {
             this.loadComponent(moduleRef);
     }
     loadComponent(moduleRef) {
-        this.Parameters.ModalComp = this.componentListMagicService.getComponent(this.Parameters.MagicFormName, !isNullOrUndefined(this.Parameters.MagicFormName));
-        let componentRef = this.overlayContentViewContainerRef.createComponent(this.Component);
-        let allowedBaseComp = MagicOverlayContainerWrapper.allowedBaseComps.get(this.OverlayTypeParam);
+        this.Parameters().ModalComp = this.componentListMagicService.getComponent(this.Parameters().MagicFormName, !isNullOrUndefined(this.Parameters().MagicFormName));
+        let componentRef = this.overlayContentViewContainerRef.createComponent(this.Component());
+        let allowedBaseComp = MagicOverlayContainerWrapper.allowedBaseComps.get(this.OverlayTypeParam());
         if (componentRef.instance instanceof allowedBaseComp.comp) {
-            Object.assign(componentRef.instance, this.Parameters);
+            if (this.OverlayTypeParam() === OverlayType.Overlay) {
+                componentRef.setInput('ModalComp', this.Parameters().ModalComp);
+                componentRef.setInput('ModalCompParameters', this.Parameters().ModalCompParameters);
+            }
+            else {
+                componentRef.setInput('title', this.Parameters().title);
+                componentRef.setInput('message', this.Parameters().message);
+            }
             componentRef.instance.onClose.subscribe((res) => {
                 this.onClose.emit(res);
             });
@@ -1647,18 +1746,17 @@ class MagicOverlayContainerWrapper {
         this.overlayContentViewContainerRef = vcRef;
     }
     GetRootElement() {
-        return this.overlayContainerWrapperElementRef.nativeElement;
+        return this.overlayContainerWrapperElementRef().nativeElement;
     }
     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__) { return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(); };
     /** @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);
+            i0.ɵɵviewQuerySignal(ctx.overlayContainerWrapperElementRef, _c0$2, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayContainerWrapperElementRef = _t.first);
-        } }, inputs: { Component: "Component", Parameters: "Parameters", OverlayTypeParam: "OverlayTypeParam" }, outputs: { onClose: "onClose" }, standalone: false, decls: 7, vars: 0, consts: [["overlayContainerWrapper", ""], ["overlayContent", ""], ["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["magicViewContainerRef", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { Component: [1, "Component"], Parameters: [1, "Parameters"], OverlayTypeParam: [1, "OverlayTypeParam"] }, outputs: { onClose: "onClose" }, standalone: false, decls: 7, vars: 0, consts: [["overlayContainerWrapper", ""], ["overlayContent", ""], ["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["magicViewContainerRef", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵelement(1, "div", 2);
             i0.ɵɵelementStart(2, "div", 3, 0);
@@ -1666,7 +1764,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,
@@ -1679,19 +1777,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: [{
-            type: Input
-        }], Parameters: [{
-            type: Input
-        }], OverlayTypeParam: [{
-            type: Input
-        }], onClose: [{
-            type: Output
-        }], overlayContainerWrapperElementRef: [{
-            type: ViewChild,
-            args: ['overlayContainerWrapper', { static: true }]
-        }] }); })();
+  `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
+    }], () => [], { Component: [{ type: i0.Input, args: [{ isSignal: true, alias: "Component", required: false }] }], Parameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "Parameters", required: false }] }], OverlayTypeParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "OverlayTypeParam", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], overlayContainerWrapperElementRef: [{ type: i0.ViewChild, args: ['overlayContainerWrapper', { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 46 }); })();
 
 /***
@@ -1712,17 +1799,17 @@ 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, " ");
+            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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAlertComponent, [{
         type: Component,
         args: [{ selector: 'sample-magic-alert-component', template: `<div>
     <div class="mg-message-background">
-      <h2> {{title}}</h2>
-      <p>{{message}} </p>
+      <h2> {{title()}}</h2>
+      <p>{{message()}} </p>
 
       <button (click)="OnClose()">OK</button>
     </div>
@@ -1751,17 +1838,17 @@ 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, " ");
+            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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
         type: Component,
         args: [{ selector: 'sample-magic-confirmation-box', template: `<div>
     <div class="mg-message-background">
-      <h2> {{title}}</h2>
-      {{message}}
+      <h2> {{title()}}</h2>
+      {{message()}}
       <br>
       <br>
 
@@ -1878,21 +1965,13 @@ class confirmationBox {
  * Service managing overlay windows
  */
 class OverlayWindowService {
-    componentList;
-    engineMagicService;
-    magicLazyModuleLoader;
-    injector;
-    compiler;
-    overlayContainerMagicProvider;
-    confirmationComponentsMagicProvider;
-    constructor(componentList, engineMagicService, magicLazyModuleLoader, injector, compiler, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
-        this.componentList = componentList;
-        this.engineMagicService = engineMagicService;
-        this.magicLazyModuleLoader = magicLazyModuleLoader;
-        this.injector = injector;
-        this.compiler = compiler;
-        this.overlayContainerMagicProvider = overlayContainerMagicProvider;
-        this.confirmationComponentsMagicProvider = confirmationComponentsMagicProvider;
+    componentList = inject(ComponentListMagicService);
+    engineMagicService = inject(EngineMagicService);
+    magicLazyModuleLoader = inject(MagicLazyLoaderService);
+    injector = inject(Injector);
+    overlayContainerMagicProvider = inject(OverlayContainerMagicProvider);
+    confirmationComponentsMagicProvider = inject(ConfirmationComponentsMagicProvider);
+    constructor() {
     }
     // The view reference of container of overlay window
     overlayWindowsContainerViewRef;
@@ -1913,8 +1992,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);
                 });
@@ -1995,13 +2073,15 @@ class OverlayWindowService {
         // Create the UI component of modal window
         let viewCRef = this.overlayWindowsContainerViewRef;
         componentRef = viewCRef.createComponent(MagicOverlayContainerWrapper);
-        // Set the data to newly created component
-        Object.assign(componentRef.instance, magicModalContainerParameters);
+        // Set signal inputs via setInput() — direct property assignment would overwrite the signal functions
+        componentRef.setInput('Component', magicModalContainerParameters.Component);
+        componentRef.setInput('Parameters', magicModalContainerParameters.Parameters);
+        componentRef.setInput('OverlayTypeParam', magicModalContainerParameters.OverlayTypeParam);
         this.overlayWindowFocusManager.pushDialog(componentRef.instance.GetRootElement());
         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__) { return new (__ngFactoryType__ || OverlayWindowService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayWindowService, [{
@@ -2009,7 +2089,7 @@ class OverlayWindowService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: ComponentListMagicService }, { type: EngineMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.Compiler }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }], null); })();
+    }], () => [], null); })();
 class OverlayWindowFocusManager {
     rootMagicElement = null;
     openDialogList = new Array(0);
@@ -2134,8 +2214,6 @@ class DialogInfo {
  * Main service to connect the UI with the Magic WebCLient
  */
 class TaskMagicService {
-    magic;
-    overlayWindowService;
     /**
      * Service to provide table-related functionalities
      */
@@ -2207,13 +2285,9 @@ class TaskMagicService {
      * @ignore
      */
     oldPageSize = 0;
-    /**
-     *
-     * @param  magic
-     */
-    constructor(magic, overlayWindowService) {
-        this.magic = magic;
-        this.overlayWindowService = overlayWindowService;
+    magic = inject(EngineMagicService);
+    overlayWindowService = inject(OverlayWindowService);
+    constructor() {
         this.Records.setGuiTopIndex(0);
         this.mgInputDateFormat = null;
     }
@@ -2996,12 +3070,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
@@ -3076,29 +3151,22 @@ 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__) { return new (__ngFactoryType__ || TaskMagicService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskMagicService, [{
         type: Injectable
-    }], () => [{ type: EngineMagicService }, { type: OverlayWindowService }], null); })();
+    }], () => [], null); })();
 
 /**
  * Implements various table-related functionalities
  */
 class TableMagicService {
-    componentList;
-    task;
     selectedItem;
     chunkSize;
-    /**
-     *
-     * @param componentList Component-mapping service
-     * @param task Magic task service
-     */
-    constructor(componentList, task) {
-        this.componentList = componentList;
-        this.task = task;
+    componentList = inject(ComponentListMagicService);
+    task = inject(TaskMagicService);
+    constructor() {
     }
     shouldOpenFieldTextEditor = true;
     /**
@@ -3208,24 +3276,19 @@ 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__) { return new (__ngFactoryType__ || TableMagicService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableMagicService, [{
         type: Injectable
-    }], () => [{ type: ComponentListMagicService }, { type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * Enables changing the browser title using Magic expression (SetTitle)
  */
 class TitleMagicService {
-    titleService;
-    /**
-     *
-     * @param titleService Angular's title-changing class
-     */
-    constructor(titleService) {
-        this.titleService = titleService;
+    titleService = inject(Title);
+    constructor() {
     }
     /**
      * Set the new title of the window
@@ -3234,12 +3297,12 @@ 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__) { return new (__ngFactoryType__ || TitleMagicService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TitleMagicService, [{
         type: Injectable
-    }], () => [{ type: i1$1.Title }], null); })();
+    }], () => [], null); })();
 
 let COLOR_FILE_NAME = new InjectionToken('colorFile', {
     providedIn: 'root',
@@ -3252,7 +3315,6 @@ const SYSTEM_BG = 4;
 const SYSTEM_FG_AND_SYSTEM_BG = 6;
 const TRANSPERENT_BG = 1;
 class MagicColorService {
-    http;
     colorFileName = 'clr_rnt.eng';
     getColorFilePath() {
         return 'assets/' + this.colorFileName;
@@ -3260,10 +3322,11 @@ class MagicColorService {
     colorsData;
     fileNotFound = false;
     // public static FILE_NAME;
-    constructor(http, colorFile1 = 'clr_rnt.eng') {
-        this.http = http;
-        if (colorFile1)
-            this.colorFileName = colorFile1;
+    http = inject(HttpClient);
+    colorFile1 = inject(COLOR_FILE_NAME);
+    constructor() {
+        if (this.colorFile1)
+            this.colorFileName = this.colorFile1;
         else
             this.colorFileName = 'clr_rnt.eng';
     }
@@ -3335,7 +3398,7 @@ 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__) { return new (__ngFactoryType__ || MagicColorService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicColorService, factory: MagicColorService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicColorService, [{
@@ -3343,26 +3406,21 @@ class MagicColorService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [COLOR_FILE_NAME]
-            }] }], null); })();
+    }], () => [], null); })();
 
 /**
  * Provides the UI with values calculated by the Magic WebClient
  */
 class AccessorMagicService {
-    task;
-    magicColor;
     Logger = null;
     hhmm = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });
     hhmmss = maskitoTimeOptionsGenerator({ mode: 'HH:MM:SS' });
+    task = inject(TaskMagicService);
+    magicColor = inject(MagicColorService);
     /**
      * @ignore
      */
-    constructor(task, magicColor) {
-        this.task = task;
-        this.magicColor = magicColor;
+    constructor() {
         this.Logger = Logger.Instance;
     }
     UploadFileToServer(fileContent, serverFileName) {
@@ -3463,6 +3521,19 @@ class AccessorMagicService {
         let vis = this.getProperty(controlId, HtmlProperties.Visible, rowId);
         return vis ? 'visible' : 'hidden';
     }
+    /**
+     * Returns whether a control is visible or not
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns true if the control is visible, false otherwise
+     */
+    // mgIsVisible
+    isVisible(controlId, rowId) {
+        // The value is not always a boolean: getProperty() returns '' if the control has not sent its
+        // Visible property yet, and undefined if the row does not exist. Comparing with === true turns
+        // both into false. getVisible() behaves the same way - for those values it returns 'hidden'.
+        return this.getProperty(controlId, HtmlProperties.Visible, rowId) === true;
+    }
     /**
      * Returns alpha mask of a control
      * @param controlId Id of control
@@ -3975,49 +4046,42 @@ 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__) { return new (__ngFactoryType__ || AccessorMagicService)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessorMagicService, [{
         type: Injectable
-    }], () => [{ type: TaskMagicService }, { type: MagicColorService }], null); })();
+    }], () => [], null); })();
 
 /**
  * Central place for adding the Magic services
  */
 class MagicServices {
-    task;
-    subformService;
-    tableService;
-    titleService;
-    mgAccessorService;
+    task = inject(TaskMagicService);
+    subformService = inject(SubformMagicService);
+    tableService = inject(TableMagicService);
+    titleService = inject(TitleMagicService);
+    mgAccessorService = inject(AccessorMagicService);
     /**
      * @ignore
      */
-    constructor(task, subformService, tableService, titleService, mgAccessorService) {
-        this.task = task;
-        this.subformService = subformService;
-        this.tableService = tableService;
-        this.titleService = titleService;
-        this.mgAccessorService = mgAccessorService;
-        task.tableService = tableService;
-        task.mgSubformService = subformService;
-        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)); };
+    constructor() {
+        this.task.tableService = this.tableService;
+        this.task.mgSubformService = this.subformService;
+        this.task.mgTitleService = this.titleService;
+        this.task.mgAccessorService = this.mgAccessorService;
+    }
+    /** @nocollapse */ static ɵfac = function MagicServices_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicServices)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicServices, [{
         type: Injectable
-    }], () => [{ type: TaskMagicService }, { type: SubformMagicService }, { type: TableMagicService }, { type: TitleMagicService }, { type: AccessorMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * Base component representing a Magic task
  */
 class TaskBaseMagicComponent {
-    ref;
-    magicServices;
     /**
      * Id of task, used for initializing the task service
      */
@@ -4030,15 +4094,24 @@ class TaskBaseMagicComponent {
      * @ignore
      */
     magicProperties = MagicProperties;
+    /**
+     * @ignore
+     * Injected as fields rather than constructor parameters, so that the constructor
+     * signature of this base class - which every generated component inherits - is unchanged.
+     */
+    magicChangeDetection = inject(MagicChangeDetectionService);
+    /**
+     * @ignore
+     */
+    destroyRef = inject(DestroyRef);
+    ref = inject(ChangeDetectorRef);
+    magicServices = inject(MagicServices);
     /**
      *
      * @param ref changes-detector object
      * @param magicServices Access point for all Magic services
      */
-    constructor(ref, magicServices) {
-        this.ref = ref;
-        this.magicServices = magicServices;
-    }
+    constructor() { }
     /**
      * Returns the Magic task service
      * @returns
@@ -4088,6 +4161,14 @@ class TaskBaseMagicComponent {
         this.task.detectChanges.pipe().subscribe(c => {
             this.ref.detectChanges();
         });
+        // Running zoneless, nothing refreshes this view unless Angular is told to.
+        // MagicChangeDetectionService is application-scoped and never completes, so this
+        // subscription must be tied to the component's lifetime.
+        this.magicChangeDetection.changed
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.ref.markForCheck();
+        });
         this.task.initTask(this.taskIdParam, this.taskDescription);
         this.createFormControlsAccessor(this.screenFormGroup);
         this.setInputDateFormat();
@@ -4161,8 +4242,8 @@ 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__) { return new (__ngFactoryType__ || TaskBaseMagicComponent)(); };
+    /** @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,
@@ -4170,21 +4251,20 @@ class TaskBaseMagicComponent {
                 selector: 'task-magic',
                 providers: [TaskMagicService, SubformMagicService, TableMagicService],
                 template: '',
+                changeDetection: ChangeDetectionStrategy.Eager,
                 standalone: false
             }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: MagicServices }], { taskIdParam: [{
+    }], () => [], { taskIdParam: [{
             type: Input
         }], 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: 24 }); })();
 
 /**
  * @ignore
  */
 class RowMagicDirective {
-    _task;
-    element;
     rowId;
     /**
      * The HTML element connected to this directive
@@ -4194,9 +4274,9 @@ class RowMagicDirective {
      * @ignore
      */
     rowChangedSubscriber = null;
-    constructor(_task, element) {
-        this._task = _task;
-        this.element = element;
+    _task = inject(TaskMagicService);
+    element = inject(ElementRef);
+    constructor() {
         this.htmlElement = this.element.nativeElement;
     }
     /**
@@ -4237,7 +4317,7 @@ 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__) { return new (__ngFactoryType__ || RowMagicDirective)(); };
     /** @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 });
@@ -4248,7 +4328,7 @@ class RowMagicDirective {
                 selector: '[magicRow]',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }], { rowId: [{
+    }], () => [], { rowId: [{
             type: Input,
             args: ['magicRow']
         }], onClick: [{
@@ -4260,12 +4340,6 @@ class RowMagicDirective {
  * Connects HTML elements to the Magic Web Client engine
  */
 class MagicDirective {
-    _task;
-    element;
-    renderer;
-    vcRef;
-    platform;
-    magicRow;
     set magic(val) {
         this.id = val;
         this.selector = "magic";
@@ -4329,21 +4403,15 @@ class MagicDirective {
      * @param platform
      * @param magicRow
      */
-    constructor(_task, element, renderer, vcRef, platform, magicRow) {
-        this._task = _task;
-        this.element = element;
-        this.renderer = renderer;
-        this.vcRef = vcRef;
-        this.platform = platform;
-        this.magicRow = magicRow;
+    constructor() {
         this.htmlElement = this.element.nativeElement;
         //let c = (<any>this.vcRef)._view;
         //while (!(c instanceof TaskBaseMagicComponent)) {
         //  c = c.component;
         //}
         //this.component = c;
-        if (!(typeof magicRow === "undefined" || magicRow === null))
-            this.rowId = magicRow.rowId;
+        if (!(typeof this.magicRow === "undefined" || this.magicRow === null))
+            this.rowId = this.magicRow.rowId;
     }
     /**
      * Get the task service
@@ -4352,6 +4420,12 @@ class MagicDirective {
     get task() {
         return this._task;
     }
+    _task = inject(TaskMagicService);
+    element = inject(ElementRef);
+    renderer = inject(Renderer2);
+    vcRef = inject(ViewContainerRef);
+    platform = inject(Platform);
+    magicRow = inject(RowMagicDirective, { optional: true });
     /**
      * Register to the events this element may need to handle
      */
@@ -4554,7 +4628,7 @@ 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__) { return new (__ngFactoryType__ || MagicDirective)(); };
     /** @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, [{
@@ -4563,9 +4637,7 @@ class MagicDirective {
                 selector: "[magic]",
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
-                type: Optional
-            }] }], { magic: [{
+    }], () => [], { magic: [{
             type: Input,
             args: ["magic"]
         }], eventsOnly: [{
@@ -4583,9 +4655,15 @@ class MagicDirective {
 class NoControlMagicDirective extends MagicDirective {
     set magic(val) { this.id = val; this.selector = 'magicnc'; }
     ;
-    constructor(_task, element, renderer, vcRef, platform, magicRow) {
-        super(_task, element, renderer, vcRef, platform, magicRow);
+    constructor() {
+        super();
     }
+    _task = inject(TaskMagicService);
+    element = inject(ElementRef);
+    renderer = inject(Renderer2);
+    vcRef = inject(ViewContainerRef);
+    platform = inject(Platform);
+    magicRow = inject(RowMagicDirective, { optional: true });
     regEvents() {
         super.regEvents();
         if (this.htmlElement instanceof HTMLSelectElement) {
@@ -4752,7 +4830,7 @@ 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__) { return new (__ngFactoryType__ || NoControlMagicDirective)(); };
     /** @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, [{
@@ -4761,9 +4839,7 @@ class NoControlMagicDirective extends MagicDirective {
                 selector: '[magicnc]',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
-                type: Optional
-            }] }], { magic: [{
+    }], () => [], { magic: [{
             type: Input,
             args: ['magicnc']
         }] }); })();
@@ -4778,10 +4854,9 @@ class Constants {
  * @ignore
  */
 class DateMagicPipe extends DatePipe {
-    _task;
-    constructor(_task) {
+    _task = inject(TaskMagicService);
+    constructor() {
         super('en-US');
-        this._task = _task;
     }
     transform(value, controlId) {
         let mask = this._task.GetControlPictureMask(controlId).getMask();
@@ -4802,7 +4877,7 @@ 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__) { return new (__ngFactoryType__ || DateMagicPipe)(); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateMagicPipe, [{
@@ -4811,7 +4886,7 @@ class DateMagicPipe extends DatePipe {
                 name: 'magicDate',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 class MgDateFormatter {
     ConvertMgDateFormatToAngular(mgDateMask) {
         let formatStr = new StringBuilder();
@@ -4879,16 +4954,13 @@ class MgDateFormatter {
  * Perform Magic validation on input controls which hold alphanumeric strings
  */
 class MgformatMagicDirective {
-    magicDir;
-    _task;
     datePasteFlag = false;
+    magicDir = inject(MagicDirective);
+    _task = inject(TaskMagicService);
     /**
      * @ignore
      */
-    constructor(magicDir, _task) {
-        this.magicDir = magicDir;
-        this._task = _task;
-    }
+    constructor() { }
     ngAfterViewInit() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null && this._task.mgInputDateFormat == null) {
@@ -5482,7 +5554,7 @@ 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__) { return new (__ngFactoryType__ || MgformatMagicDirective)(); };
     /** @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 });
@@ -5493,7 +5565,7 @@ class MgformatMagicDirective {
                 selector: '[mgFormat]',
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }, { type: TaskMagicService }], { onFocusEvent: [{
+    }], () => [], { onFocusEvent: [{
             type: HostListener,
             args: ['focus', ['$event']]
         }], onPaste: [{
@@ -5514,10 +5586,9 @@ class MgformatMagicDirective {
  * @ignore
  */
 class TimeMagicPipe extends DatePipe {
-    _task;
-    constructor(_task) {
+    _task = inject(TaskMagicService);
+    constructor() {
         super('en-US');
-        this._task = _task;
     }
     transform(value, controlId) {
         let mask = this._task.GetControlPictureMask(controlId).getMask();
@@ -5548,7 +5619,7 @@ 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__) { return new (__ngFactoryType__ || TimeMagicPipe)(); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeMagicPipe, [{
@@ -5557,22 +5628,20 @@ class TimeMagicPipe extends DatePipe {
                 name: 'magicTime',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * Validates the field range.
  */
 class RangeValidatorMagicDirective {
-    _task;
-    vcRef;
+    _task = inject(TaskMagicService);
+    vcRef = inject(ViewContainerRef);
     /**
      *
      * @param _task The task service
      * @param vcRef
      */
-    constructor(_task, vcRef) {
-        this._task = _task;
-        this.vcRef = vcRef;
+    constructor() {
     }
     /**
      * Validation method
@@ -5607,7 +5676,7 @@ 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__) { return new (__ngFactoryType__ || RangeValidatorMagicDirective)(); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALIDATORS,
@@ -5629,7 +5698,7 @@ class RangeValidatorMagicDirective {
                 ],
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ViewContainerRef }], null); })();
+    }], () => [], null); })();
 
 function SubformMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ndc-dynamic", 0);
@@ -5641,8 +5710,6 @@ function SubformMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  * Represents a Magic subform
  */
 class SubformMagicComponent {
-    vcRef;
-    mgSub;
     /**
       * @ignore
       */
@@ -5659,12 +5726,12 @@ class SubformMagicComponent {
     /**
      * @ignore
      */
-    constructor(vcRef, mgSub) {
-        this.vcRef = vcRef;
-        this.mgSub = mgSub;
+    constructor() {
         // For angular 13 - find the component from _hostLView
         this.component = (this.vcRef._hostLView).find(v => !isNullOrUndefined(v));
     }
+    vcRef = inject(ViewContainerRef);
+    mgSub = inject(SubformMagicService);
     /**
      * @ignore
      */
@@ -5677,32 +5744,33 @@ 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 ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicComponent)(); };
     /** @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.ɵɵconditional(ctx.Component ? 0 : -1);
-        } }, dependencies: [i2$3.DynamicIoDirective, i2$3.DynamicComponent], encapsulation: 2 });
+        } }, dependencies: [i1$1.DynamicIoDirective, i1$1.DynamicComponent], encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-subform',
-                template: `
-    @if (Component) {
-      <ndc-dynamic
-        [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: [{
+    }], () => [], { magic: [{
             type: Input,
             args: ['magic']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 24 }); })();
 
 const _c0$1 = ["customContent"];
 const _c1 = ["*"];
@@ -5730,9 +5798,6 @@ function ErrorMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  * Represents a Magic subform
  */
 class ErrorMagicComponent {
-    _task;
-    mgService;
-    changeDetectorRef;
     /**
      * @ignore
      */
@@ -5751,19 +5816,19 @@ class ErrorMagicComponent {
     ;
     // if true - display standard magic error message, if false - customer has provides his own content and we'll use it
     defaultDisplay = true;
-    set CustomContent(innerComponent) {
-        this.defaultDisplay = innerComponent == undefined || this.isEmpty(innerComponent.nativeElement);
-        this.changeDetectorRef.detectChanges();
-    }
-    ;
+    customContentRef = viewChild('customContent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customContentRef" }] : /* istanbul ignore next */ []));
     /**
      * @ignore
      */
-    constructor(_task, mgService, changeDetectorRef) {
-        this._task = _task;
-        this.mgService = mgService;
-        this.changeDetectorRef = changeDetectorRef;
+    constructor() {
         this.rowId = "0";
+        // Reactively update defaultDisplay whenever customContent changes in the DOM
+        effect(() => {
+            const innerComponent = this.customContentRef();
+            this.defaultDisplay = innerComponent == undefined || this.isEmpty(innerComponent.nativeElement);
+            this.changeDetectorRef.detectChanges();
+        });
     }
     /**
      * returns true if the html element has no children
@@ -5802,73 +5867,68 @@ 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)); };
+    _task = inject(TaskMagicService);
+    mgService = inject(AccessorMagicService);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    /** @nocollapse */ static ɵfac = function ErrorMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ErrorMagicComponent)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 5);
+            i0.ɵɵviewQuerySignal(ctx.customContentRef, _c0$1, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
+            i0.ɵɵqueryAdvance();
         } }, 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.ɵɵconditionalCreate(0, ErrorMagicComponent_Conditional_0_Template, 5, 1, "div");
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.HasErrors(ctx.id) ? 0 : -1);
-        } }, encapsulation: 2 });
+        } }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
-                template: `@if (HasErrors(id)) {
-  <div>
-    <div #customContent>
-      <ng-content></ng-content>
-    </div>
-    @if (defaultDisplay) {
-      <span>
-        {{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: [{
+    }], () => [], { magic: [{
             type: Input,
             args: ['magic']
         }], rowId1: [{
             type: Input,
             args: ['rowId']
-        }], CustomContent: [{
-            type: ViewChild,
-            args: ['customContent', { static: false }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 28 }); })();
+        }], customContentRef: [{ type: i0.ViewChild, args: ['customContent', { isSignal: true }] }] }); })();
+(() => { (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
  */
 class CheckboxMagicDirective {
-    magicDirective;
-    el;
-    task;
-    threeState = false;
+    threeState = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threeState" }] : /* istanbul ignore next */ []));
     subscribeRefreshDom = null;
     isIndeterminate = false;
-    /**
-     * @ignore
-     */
-    constructor(magicDirective, el, task) {
-        this.magicDirective = magicDirective;
-        this.el = el;
-        this.task = task;
+    magicDirective = inject(MagicDirective);
+    el = inject(ElementRef);
+    task = inject(TaskMagicService);
+    constructor() {
     }
     /**
      * Handles the Checkbox 'change' event - pass it to the Magic engine
      */
     onChange($event) {
-        if (this.threeState) {
+        if (this.threeState()) {
             this.handleThreeState();
         }
         else {
@@ -5876,7 +5936,7 @@ class CheckboxMagicDirective {
         }
     }
     ngOnInit() {
-        if (this.threeState) {
+        if (this.threeState()) {
             let guiEvent = getGuiEventObj("setAsThreeState", this.magicDirective.id, +this.magicDirective.rowId);
             this.task.insertEvent(guiEvent);
             this.el.nativeElement.indeterminate = this.isIndeterminate = this.task.getProperty(this.magicDirective.id, HtmlProperties.CheckBoxIndeterminate, this.magicDirective.rowId);
@@ -5931,10 +5991,10 @@ 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__) { return new (__ngFactoryType__ || CheckboxMagicDirective)(); };
     /** @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 });
+        } }, inputs: { threeState: [1, "threeState"] }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
@@ -5944,9 +6004,7 @@ class CheckboxMagicDirective {
 `,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }, { type: i0.ElementRef }, { type: TaskMagicService }], { threeState: [{
-            type: Input
-        }], onChange: [{
+    }], () => [], { threeState: [{ type: i0.Input, args: [{ isSignal: true, alias: "threeState", required: false }] }], onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -5955,9 +6013,8 @@ class CheckboxMagicDirective {
  * Directive for comboboxes, to handle the 'change' event
  */
 class ComboboxMagicDirective {
-    magicDirective;
-    constructor(magicDirective) {
-        this.magicDirective = magicDirective;
+    magicDirective = inject(MagicDirective);
+    constructor() {
         // subcribe to refreshDom. This is a special case for native select HTML control.
         // to refresh the selected property. Else by default, HTML element doesn't get refreshed as per
         // selected value and 1st element remains selected.
@@ -5979,7 +6036,7 @@ 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__) { return new (__ngFactoryType__ || ComboboxMagicDirective)(); };
     /** @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 });
@@ -5990,7 +6047,7 @@ class ComboboxMagicDirective {
                 selector: `select[magic]:not([multiple])`,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6027,7 +6084,7 @@ function MagicShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     const defaultSpinner_r2 = i0.ɵɵreference(7);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.SpinnerTemplate ? ctx_r0.SpinnerTemplate : defaultSpinner_r2);
+    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", 7);
@@ -6036,16 +6093,6 @@ function MagicShellComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
  * Root Magic component
  */
 class MagicShellComponent {
-    engineMagicService;
-    componentList;
-    changeDetectorRef;
-    titleService;
-    overlayWindowService;
-    httpClient;
-    pendingCommandsCollector;
-    route;
-    router;
-    exitMagicService;
     /**
      * Root component to be displayed in the window
      */
@@ -6055,10 +6102,22 @@ class MagicShellComponent {
      */
     RootComponentParameters;
     overlayWindowsContainerViewRef;
-    rootMagicElementRef;
-    SpinnerTemplate;
+    rootMagicElementRef = viewChild.required('magicRoot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootMagicElementRef" }] : /* istanbul ignore next */ []));
+    SpinnerTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "SpinnerTemplate" }] : /* istanbul ignore next */ []));
     showSpinner;
     magicEngineTerminated = false;
+    engineMagicService = inject(EngineMagicService);
+    componentList = inject(ComponentListMagicService);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    titleService = inject(Title);
+    overlayWindowService = inject(OverlayWindowService);
+    httpClient = inject(HttpClient);
+    pendingCommandsCollector = inject(CommandsCollectorMagicService);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    exitMagicService = inject(ExitMagicService, { optional: true });
     /**
      *
      * @param magic Magic's service
@@ -6068,17 +6127,7 @@ class MagicShellComponent {
      * @param httpClient The native httpClient instance
      * @param exitMagicService Magic exit service
      */
-    constructor(engineMagicService, componentList, changeDetectorRef, titleService, overlayWindowService, httpClient, pendingCommandsCollector, route, router, exitMagicService) {
-        this.engineMagicService = engineMagicService;
-        this.componentList = componentList;
-        this.changeDetectorRef = changeDetectorRef;
-        this.titleService = titleService;
-        this.overlayWindowService = overlayWindowService;
-        this.httpClient = httpClient;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.route = route;
-        this.router = router;
-        this.exitMagicService = exitMagicService;
+    constructor() {
         this.initialize();
         this.setTitle();
     }
@@ -6098,13 +6147,20 @@ class MagicShellComponent {
             this.magicEngineTerminated = true;
         }
     }
-    onUnload(event) {
+    /**
+     * Page-hide event listener, used in place of 'unload'.
+     * Chrome blocks 'unload' by permissions policy ("unload is not allowed in this document"),
+     * so an unload handler is never even registered. 'pagehide' is fired at an earlier step of
+     * the same unloading sequence, so it covers every case 'unload' did.
+     */
+    onPageHide() {
         // Chrome provides an opportunity to terminate the context after user approves the browser unload alert
-        if (!this.magicEngineTerminated)
+        if (!this.magicEngineTerminated) {
             this.engineMagicService.TerminateContextUsingFetchAPI();
+        }
     }
     ngAfterViewInit() {
-        this.overlayWindowService.init(this.overlayWindowsContainerViewRef, this.rootMagicElementRef.nativeElement, this.changeDetectorRef);
+        this.overlayWindowService.init(this.overlayWindowsContainerViewRef, this.rootMagicElementRef().nativeElement, this.changeDetectorRef);
         // Helper function to start the engine
         const startEngine = () => {
             const queryParams = this.route.snapshot.queryParams;
@@ -6218,15 +6274,14 @@ 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__) { return new (__ngFactoryType__ || MagicShellComponent)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 7);
+            i0.ɵɵviewQuerySignal(ctx.rootMagicElementRef, _c0, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
+            i0.ɵɵqueryAdvance();
         } }, hostBindings: function MagicShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            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([
+            i0.ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, i0.ɵɵresolveWindow)("pagehide", function MagicShellComponent_pagehide_HostBindingHandler() { return ctx.onPageHide(); }, i0.ɵɵresolveWindow);
+        } }, inputs: { SpinnerTemplate: [1, "SpinnerTemplate"] }, standalone: false, features: [i0.ɵɵProvidersFeature([
             // ExitMagicService
             ])], 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);
@@ -6240,50 +6295,43 @@ class MagicShellComponent {
             i0.ɵɵconditional(ctx.RootComponent !== null ? 2 : -1);
             i0.ɵɵadvance(3);
             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)}}"] });
+        } }, dependencies: [i1.NgTemplateOutlet, i1$1.DynamicIoDirective, i1$1.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>
-      @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>
-    `, 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: [{
-            type: ViewChild,
-            args: ['magicRoot', { static: true }]
-        }], SpinnerTemplate: [{
-            type: Input
-        }], onBeforeUnload: [{
+                ], 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"] }]
+    }], () => [], { rootMagicElementRef: [{ type: i0.ViewChild, args: ['magicRoot', { isSignal: true }] }], SpinnerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "SpinnerTemplate", required: false }] }], onBeforeUnload: [{
             type: HostListener,
             args: ['window:beforeunload', ['$event']]
-        }], onUnload: [{
+        }], onPageHide: [{
             type: HostListener,
-            args: ['window:unload', ['$event']]
+            args: ['window:pagehide']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 89 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 90 }); })();
 
 /**
  * @ignore
@@ -6310,7 +6358,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
             }]
@@ -6341,10 +6389,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',
@@ -6356,9 +6404,8 @@ class MagicDefaultValueAccessor extends DefaultValueAccessor {
  * Directive for checkboxes which should not have a form control
  */
 class CheckboxNoFormControlMagicDirective {
-    magicDirective;
-    constructor(magicDirective) {
-        this.magicDirective = magicDirective;
+    magicDirective = inject(MagicDirective);
+    constructor() {
     }
     /**
      * Handle the 'Checkbox' change event - pass it to the Magic engine
@@ -6366,7 +6413,7 @@ 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__) { return new (__ngFactoryType__ || CheckboxNoFormControlMagicDirective)(); };
     /** @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 });
@@ -6379,7 +6426,7 @@ class CheckboxNoFormControlMagicDirective {
     `,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6388,9 +6435,8 @@ class CheckboxNoFormControlMagicDirective {
  * Directive for non-checkbox input controls which do not have a form control
  */
 class InputNoFormControlMagicDirective {
-    magicDirective;
-    constructor(magicDirective) {
-        this.magicDirective = magicDirective;
+    magicDirective = inject(MagicDirective);
+    constructor() {
     }
     /**
      * Handles the 'change' event - pass it to the Magic engine
@@ -6398,7 +6444,7 @@ 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__) { return new (__ngFactoryType__ || InputNoFormControlMagicDirective)(); };
     /** @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 });
@@ -6410,7 +6456,7 @@ class InputNoFormControlMagicDirective {
              textarea[magic]:([noFormControl]):not([type=checkbox])`,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6429,10 +6475,6 @@ const DATE_VALUE_ACCESSOR = {
  *  `<input type="date" formControlName="birthday" dateInput>`
  */
 class DateValueAccessor {
-    renderer;
-    elementRef;
-    magicDir;
-    _task;
     onChange = (_) => { };
     onTouched = () => { };
     onBlurEvent(event) {
@@ -6440,12 +6482,11 @@ class DateValueAccessor {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         this.formatDateWithCentury(event.target.value, century, control);
     }
-    constructor(renderer, elementRef, magicDir, _task) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.magicDir = magicDir;
-        this._task = _task;
-    }
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    magicDir = inject(MagicDirective);
+    _task = inject(TaskMagicService);
+    constructor() { }
     /** Format year, if user enters 2 digits instead of 4 digits as per the century given in Magic.ini file */
     formatDateWithCentury(userInput, century, control) {
         const separator = userInput.includes('/') ? '/' : "-";
@@ -6483,7 +6524,7 @@ 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__) { return new (__ngFactoryType__ || DateValueAccessor)(); };
     /** @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])] });
@@ -6495,7 +6536,7 @@ class DateValueAccessor {
                 providers: [DATE_VALUE_ACCESSOR],
                 standalone: false
             }]
-    }], () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: MagicDirective }, { type: TaskMagicService }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ["input", ["$event.target.valueAsDate"]]
         }], onTouched: [{
@@ -6510,10 +6551,6 @@ class DateValueAccessor {
  * Responsible for connecting HTML elements to the Magic WebClient engine showing it is not Magic Control but a Dummy control which is used to notify only receeive focus event for now
  */
 class NonMagicControlDirective {
-    _task;
-    element;
-    renderer;
-    vcRef;
     set magic(val) {
         this.id = val;
         this.selector = 'NonMagicControl';
@@ -6551,13 +6588,13 @@ class NonMagicControlDirective {
      * @param renderer Renderer for the element
      * @param vcRef
      */
-    constructor(_task, element, renderer, vcRef) {
-        this._task = _task;
-        this.element = element;
-        this.renderer = renderer;
-        this.vcRef = vcRef;
+    constructor() {
         this.htmlElement = this.element.nativeElement;
     }
+    _task = inject(TaskMagicService);
+    element = inject(ElementRef);
+    renderer = inject(Renderer2);
+    vcRef = inject(ViewContainerRef);
     /**
      * Get the task service
      * @returns
@@ -6588,7 +6625,7 @@ 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__) { return new (__ngFactoryType__ || NonMagicControlDirective)(); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: [0, "NonMagicControl", "magic"] }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NonMagicControlDirective, [{
@@ -6597,15 +6634,14 @@ class NonMagicControlDirective {
                 selector: '[NonMagicControl]',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], { magic: [{
+    }], () => [], { magic: [{
             type: Input,
             args: ['NonMagicControl']
         }] }); })();
 
 class Time24MagicPipe {
-    _task;
-    constructor(_task) {
-        this._task = _task;
+    _task = inject(TaskMagicService);
+    constructor() {
     }
     transform(value, controlId) {
         let mask = this._task.GetControlPictureMask(controlId).getMask();
@@ -6623,7 +6659,7 @@ 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__) { return new (__ngFactoryType__ || Time24MagicPipe)(); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime24", type: Time24MagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Time24MagicPipe, [{
@@ -6632,7 +6668,7 @@ class Time24MagicPipe {
                 name: 'magicTime24',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * @ignore
@@ -6674,27 +6710,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,
@@ -6730,6 +6767,7 @@ class MagicModule {
         ReactiveFormsModule,
         RouterModule,
         DynamicModule,
+        MaskitoDirective,
         CdkDragHandle,
         CdkDrag,
         DragDropModule], exports: [MagicDirective,
@@ -6760,7 +6798,7 @@ class MagicModule {
         NonMagicControlDirective,
         MagicFocusDirective,
         MagicViewContainerRef,
-        Time24MagicPipe, MaskitoModule] }); })();
+        Time24MagicPipe, MaskitoDirective] }); })();
 
 const MG_FORMATS = {
     parse: { dateInput: { month: 'short', year: 'numeric', day: 'numeric' } },
@@ -6772,14 +6810,12 @@ const MG_FORMATS = {
     }
 };
 class MgDateAdapter extends NativeDateAdapter {
-    task;
-    localeId;
     mgdtfmt = null;
-    constructor(task, localeId) {
-        super(localeId);
-        this.task = task;
-        this.localeId = localeId;
-        this.setLocale(localeId);
+    task = inject(TaskMagicService);
+    localeId = inject(MAT_DATE_LOCALE);
+    constructor() {
+        super();
+        this.setLocale(this.localeId);
     }
     parse(value) {
         let valueStr = value;
@@ -6854,15 +6890,12 @@ 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__) { return new (__ngFactoryType__ || MgDateAdapter)(); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgDateAdapter, [{
         type: Injectable
-    }], () => [{ type: TaskMagicService }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [MAT_DATE_LOCALE]
-            }] }], null); })();
+    }], () => [], null); })();
 
 const matDateProviders = [
     { provide: DateAdapter, useClass: MgDateAdapter },
@@ -6884,6 +6917,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
  */
@@ -6969,5 +7105,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, MagicChangeDetectionService, 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