@magic-xpa/angular 4.1300.0-dev4130.261 → 4.1300.0-dev4130.266

package/fesm2022/magic-xpa-angular.mjs

@@ -1,26 +1,24 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import * as i0 from '@angular/core';
-import { Injectable, createNgModule, ChangeDetectionStrategy, 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 { filter, map, debounceTime, take } from 'rxjs/operators';
 import { Subject, EMPTY, fromEvent, Observable } from 'rxjs';
-import { __decorate, __metadata } from 'tslib';
-import * as i2$1 from '@angular/cdk/drag-drop';
+import { filter, map, debounceTime, take } from 'rxjs/operators';
+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, withXhr, 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 { 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';
@@ -240,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
  */
@@ -280,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) {
@@ -295,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);
@@ -310,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);
@@ -431,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++;
@@ -461,8 +529,7 @@ class CommandsCollectorMagicService {
         commands.forEach(command => { this.commands.Remove(command); });
         return commands;
     }
-    /** @nocollapse */ static ɵfac = function CommandsCollectorMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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, [{
@@ -470,7 +537,7 @@ class CommandsCollectorMagicService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: EngineMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * @ignore
@@ -524,30 +591,21 @@ class MagicLazyLoaderService {
  * Service for managing subforms and routing
  */
 class SubformMagicService {
-    task;
-    activatedRoute;
-    componentList;
-    pendingCommandsCollector;
-    router;
-    routerCommandsMagicService;
-    componentListMagicService;
-    loader;
-    injector;
     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) {
-        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;
+    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
@@ -748,26 +806,17 @@ class SubformMagicService {
         }
         return currentActiveRoute;
     }
-    /** @nocollapse */ static ɵfac = function SubformMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector)); };
+    /** @nocollapse */ static ɵ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 }], 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,7 @@ class RouterContainerMagicComponent {
     getRouterPath() {
         return this.routePath;
     }
-    /** @nocollapse */ static ɵfac = function RouterContainerMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -885,7 +932,7 @@ class RouterContainerMagicComponent {
                 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); })();
+    }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src/ui/router-container.magic.component.ts", lineNumber: 24 }); })();
 
 /**
@@ -1060,38 +1107,26 @@ class MagicModalProperties {
     }
 }
 
-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);
+/**
+ * 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__) { /* @ts-ignore */
-    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, [{
@@ -1100,7 +1135,7 @@ class MagicViewContainerRef {
                 selector: '[magicViewContainerRef]',
                 standalone: false
             }]
-    }], () => [{ type: i0.ViewContainerRef }], null); })();
+    }], () => [], null); })();
 
 const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
@@ -1298,6 +1333,8 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is resizable, false otherwise.
      */
     IsResizable() {
+        if (!this.componentRef)
+            return false;
         let comp = this.getOverlayProps();
         return comp.IsResizable();
     }
@@ -1306,6 +1343,8 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is movable, false otherwise.
      */
     IsMovable() {
+        if (!this.componentRef)
+            return false;
         let comp = this.getOverlayProps();
         return comp.IsMovable();
     }
@@ -1452,7 +1491,7 @@ 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%}"], changeDetection: 1 });
+        } }, 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,
@@ -1537,16 +1576,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
@@ -1556,18 +1597,12 @@ 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, changeDetection: 1 });
+    /** @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: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false }]
-    }], null, { title: [{
-            type: Input
-        }], message: [{
-            type: Input
-        }], onClose: [{
-            type: Output
-        }] }); })();
+    }], 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 }); })();
 
 /**
@@ -1577,16 +1612,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
      */
@@ -1594,33 +1631,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, changeDetection: 1 });
+    /** @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: '', changeDetection: ChangeDetectionStrategy.Eager, 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: 15 }); })();
+    }], 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__) { /* @ts-ignore */
-    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, [{
@@ -1629,29 +1657,29 @@ class MagicFocusDirective {
                 selector: '[magicFocus]',
                 standalone: false
             }]
-    }], () => [{ type: i0.ElementRef }], null); })();
+    }], () => [], null); })();
 
 const _c0$2 = ["overlayContainerWrapper"];
 class MagicOverlayContainerWrapper {
-    componentListMagicService;
-    magicLazyModuleLoader;
-    injector;
-    changeDetectorRef;
     /**
      *
      */
-    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
@@ -1661,23 +1689,19 @@ class MagicOverlayContainerWrapper {
         [OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
         [OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
     ]);
-    /**
-     *
-     * @param componentFactoryResolver
-     */
-    constructor(componentListMagicService, magicLazyModuleLoader, injector, changeDetectorRef) {
-        this.componentListMagicService = componentListMagicService;
-        this.magicLazyModuleLoader = magicLazyModuleLoader;
-        this.injector = injector;
-        this.changeDetectorRef = changeDetectorRef;
+    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';
@@ -1696,11 +1720,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);
             });
@@ -1714,19 +1745,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__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    /** @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);
@@ -1748,19 +1777,8 @@ class MagicOverlayContainerWrapper {
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" ></div>
     </div>
   `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
-    }], () => [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], { Component: [{
-            type: Input
-        }], Parameters: [{
-            type: Input
-        }], OverlayTypeParam: [{
-            type: Input
-        }], onClose: [{
-            type: Output
-        }], overlayContainerWrapperElementRef: [{
-            type: ViewChild,
-            args: ['overlayContainerWrapper', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 48 }); })();
+    }], () => [], { 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 }); })();
 
 /***
  * This is sample component for the alert message
@@ -1780,17 +1798,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>
@@ -1819,17 +1837,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>
 
@@ -1946,19 +1964,13 @@ class confirmationBox {
  * Service managing overlay windows
  */
 class OverlayWindowService {
-    componentList;
-    engineMagicService;
-    magicLazyModuleLoader;
-    injector;
-    overlayContainerMagicProvider;
-    confirmationComponentsMagicProvider;
-    constructor(componentList, engineMagicService, magicLazyModuleLoader, injector, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
-        this.componentList = componentList;
-        this.engineMagicService = engineMagicService;
-        this.magicLazyModuleLoader = magicLazyModuleLoader;
-        this.injector = injector;
-        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;
@@ -2060,14 +2072,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__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || OverlayWindowService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -2075,7 +2088,7 @@ class OverlayWindowService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: ComponentListMagicService }, { type: EngineMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }], null); })();
+    }], () => [], null); })();
 class OverlayWindowFocusManager {
     rootMagicElement = null;
     openDialogList = new Array(0);
@@ -2200,8 +2213,6 @@ class DialogInfo {
  * Main service to connect the UI with the Magic WebCLient
  */
 class TaskMagicService {
-    magic;
-    overlayWindowService;
     /**
      * Service to provide table-related functionalities
      */
@@ -2273,13 +2284,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;
     }
@@ -3143,30 +3150,22 @@ class TaskMagicService {
             }
         }
     }
-    /** @nocollapse */ static ɵfac = function TaskMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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;
     /**
@@ -3276,25 +3275,19 @@ class TableMagicService {
             topIndex--;
         return topIndex;
     }
-    /** @nocollapse */ static ɵfac = function TableMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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
@@ -3303,13 +3296,12 @@ class TitleMagicService {
     setTitle(newTitle) {
         this.titleService.setTitle(newTitle);
     }
-    /** @nocollapse */ static ɵfac = function TitleMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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',
@@ -3322,7 +3314,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;
@@ -3330,10 +3321,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';
     }
@@ -3405,8 +3397,7 @@ class MagicColorService {
         }
         return '';
     }
-    /** @nocollapse */ static ɵfac = function MagicColorService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || MagicColorService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(COLOR_FILE_NAME)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -3414,26 +3405,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) {
@@ -4046,51 +4032,42 @@ class AccessorMagicService {
     getColor(colorNumber, colorType) {
         return this.magicColor.getColor(colorNumber, colorType);
     }
-    /** @nocollapse */ static ɵfac = function AccessorMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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__) { /* @ts-ignore */
-    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
      */
@@ -4103,15 +4080,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
@@ -4161,6 +4147,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();
@@ -4234,8 +4228,7 @@ class TaskBaseMagicComponent {
     ngOnDestroy() {
         this.task.dispose();
     }
-    /** @nocollapse */ static ɵfac = function TaskBaseMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
+    /** @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, [{
@@ -4247,19 +4240,17 @@ class TaskBaseMagicComponent {
                 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: 22 }); })();
+(() => { (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
@@ -4269,9 +4260,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;
     }
     /**
@@ -4312,8 +4303,7 @@ class RowMagicDirective {
                 event.cancelBubble = true;
         }
     }
-    /** @nocollapse */ static ɵfac = function RowMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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 });
@@ -4324,7 +4314,7 @@ class RowMagicDirective {
                 selector: '[magicRow]',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }], { rowId: [{
+    }], () => [], { rowId: [{
             type: Input,
             args: ['magicRow']
         }], onClick: [{
@@ -4336,12 +4326,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";
@@ -4405,21 +4389,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
@@ -4428,6 +4406,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
      */
@@ -4630,8 +4614,7 @@ class MagicDirective {
     ngOnDestroy() {
         this.subscribeRefreshDom.unsubscribe();
     }
-    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -4640,9 +4623,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: [{
@@ -4660,9 +4641,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) {
@@ -4829,8 +4816,7 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
-    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -4839,9 +4825,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']
         }] }); })();
@@ -4856,10 +4840,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();
@@ -4880,8 +4863,7 @@ class DateMagicPipe extends DatePipe {
             value = "";
         return value;
     }
-    /** @nocollapse */ static ɵfac = function DateMagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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, [{
@@ -4890,7 +4872,7 @@ class DateMagicPipe extends DatePipe {
                 name: 'magicDate',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 class MgDateFormatter {
     ConvertMgDateFormatToAngular(mgDateMask) {
         let formatStr = new StringBuilder();
@@ -4958,16 +4940,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) {
@@ -5561,8 +5540,7 @@ class MgformatMagicDirective {
                 return true;
         return false;
     }
-    /** @nocollapse */ static ɵfac = function MgformatMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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 });
@@ -5573,7 +5551,7 @@ class MgformatMagicDirective {
                 selector: '[mgFormat]',
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }, { type: TaskMagicService }], { onFocusEvent: [{
+    }], () => [], { onFocusEvent: [{
             type: HostListener,
             args: ['focus', ['$event']]
         }], onPaste: [{
@@ -5594,10 +5572,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();
@@ -5628,8 +5605,7 @@ class TimeMagicPipe extends DatePipe {
         }
         return value;
     }
-    /** @nocollapse */ static ɵfac = function TimeMagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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, [{
@@ -5638,22 +5614,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
@@ -5688,8 +5662,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__) { /* @ts-ignore */
-    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,
@@ -5711,7 +5684,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);
@@ -5723,8 +5696,6 @@ function SubformMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  * Represents a Magic subform
  */
 class SubformMagicComponent {
-    vcRef;
-    mgSub;
     /**
       * @ignore
       */
@@ -5741,12 +5712,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
      */
@@ -5759,30 +5730,29 @@ class SubformMagicComponent {
     get Parameters() {
         return this.mgSub.mgGetParameters(this.id);
     }
-    /** @nocollapse */ static ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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, changeDetection: 1 });
+        } }, 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']
         }] }); })();
@@ -5814,9 +5784,6 @@ function ErrorMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  * Represents a Magic subform
  */
 class ErrorMagicComponent {
-    _task;
-    mgService;
-    changeDetectorRef;
     /**
      * @ignore
      */
@@ -5835,19 +5802,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
@@ -5886,13 +5853,14 @@ class ErrorMagicComponent {
         }
         return false;
     }
-    /** @nocollapse */ static ɵfac = function ErrorMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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");
@@ -5904,57 +5872,49 @@ class 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 }]
-        }] }); })();
+        }], 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 {
@@ -5962,7 +5922,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);
@@ -6017,11 +5977,10 @@ class CheckboxMagicDirective {
         if (this.subscribeRefreshDom !== null)
             this.subscribeRefreshDom.unsubscribe();
     }
-    /** @nocollapse */ static ɵfac = function CheckboxMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵ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,
@@ -6031,9 +5990,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']]
         }] }); })();
@@ -6042,9 +5999,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.
@@ -6066,8 +6022,7 @@ class ComboboxMagicDirective {
     onComboboxItemsListChanged() {
         this.magicDirective.task.refreshView();
     }
-    /** @nocollapse */ static ɵfac = function ComboboxMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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 });
@@ -6078,7 +6033,7 @@ class ComboboxMagicDirective {
                 selector: `select[magic]:not([multiple])`,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6115,7 +6070,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);
@@ -6124,16 +6079,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
      */
@@ -6143,10 +6088,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
@@ -6156,17 +6113,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();
     }
@@ -6192,7 +6139,7 @@ class MagicShellComponent {
             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;
@@ -6306,16 +6253,14 @@ class MagicShellComponent {
                 break;
         }
     }
-    /** @nocollapse */ static ɵfac = function MagicShellComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || MagicShellComponent)(i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.Title), i0.ɵɵdirectiveInject(OverlayWindowService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
+    /** @nocollapse */ static ɵ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([
+        } }, 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);
@@ -6329,50 +6274,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)}}"], changeDetection: 1 });
+        } }, 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>
+                ], template: `
+    <div #magicRoot>
+      @if (RootComponent !== null) {
+        <ndc-dynamic
+          [ndcDynamicComponent]="RootComponent"
+          [ndcDynamicInputs]   ="RootComponentParameters">
+        </ndc-dynamic>
+      }
+
+      <div #overlayWindowsContainer magicViewContainerRef>
+      </div>
+    </div>
+
+    @if (showSpinner) {
+      <div class="spinner-background">
+        <ng-container [ngTemplateOutlet]="SpinnerTemplate() ? SpinnerTemplate():defaultSpinner"></ng-container>
+      </div>
+    }
+
+    <ng-template #defaultSpinner>
+      <div class="mgSpinnerClass"></div>
+    </ng-template>
     `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-    }], () => [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ExitMagicService, decorators: [{
-                type: Optional
-            }] }], { rootMagicElementRef: [{
-            type: ViewChild,
-            args: ['magicRoot', { static: true }]
-        }], SpinnerTemplate: [{
-            type: Input
-        }], onBeforeUnload: [{
+    }], () => [], { 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: [{
             type: HostListener,
             args: ['window:unload', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 92 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 90 }); })();
 
 /**
  * @ignore
@@ -6445,9 +6383,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
@@ -6455,8 +6392,7 @@ class CheckboxNoFormControlMagicDirective {
     onChange($event) {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
-    /** @nocollapse */ static ɵfac = function CheckboxNoFormControlMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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 });
@@ -6469,7 +6405,7 @@ class CheckboxNoFormControlMagicDirective {
     `,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6478,9 +6414,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
@@ -6488,8 +6423,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__) { /* @ts-ignore */
-    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 });
@@ -6501,7 +6435,7 @@ class InputNoFormControlMagicDirective {
              textarea[magic]:([noFormControl]):not([type=checkbox])`,
                 standalone: false
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
@@ -6520,10 +6454,6 @@ const DATE_VALUE_ACCESSOR = {
  *  `<input type="date" formControlName="birthday" dateInput>`
  */
 class DateValueAccessor {
-    renderer;
-    elementRef;
-    magicDir;
-    _task;
     onChange = (_) => { };
     onTouched = () => { };
     onBlurEvent(event) {
@@ -6531,12 +6461,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('/') ? '/' : "-";
@@ -6574,8 +6503,7 @@ class DateValueAccessor {
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
-    /** @nocollapse */ static ɵfac = function DateValueAccessor_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵ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])] });
@@ -6587,7 +6515,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: [{
@@ -6602,10 +6530,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';
@@ -6643,13 +6567,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
@@ -6680,8 +6604,7 @@ class NonMagicControlDirective {
     ngOnInit() {
         this.regEvents();
     }
-    /** @nocollapse */ static ɵfac = function NonMagicControlDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
-    return new (__ngFactoryType__ || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵ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, [{
@@ -6690,15 +6613,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();
@@ -6716,8 +6638,7 @@ class Time24MagicPipe {
         }
         return value;
     }
-    /** @nocollapse */ static ɵfac = function Time24MagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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, [{
@@ -6726,7 +6647,7 @@ class Time24MagicPipe {
                 name: 'magicTime24',
                 standalone: false
             }]
-    }], () => [{ type: TaskMagicService }], null); })();
+    }], () => [], null); })();
 
 /**
  * @ignore
@@ -6868,14 +6789,12 @@ const MG_FORMATS = {
     }
 };
 class MgDateAdapter extends NativeDateAdapter {
-    task;
-    localeId;
     mgdtfmt = null;
-    constructor(task, localeId) {
+    task = inject(TaskMagicService);
+    localeId = inject(MAT_DATE_LOCALE);
+    constructor() {
         super();
-        this.task = task;
-        this.localeId = localeId;
-        this.setLocale(localeId);
+        this.setLocale(this.localeId);
     }
     parse(value) {
         let valueStr = value;
@@ -6950,16 +6869,12 @@ class MgDateAdapter extends NativeDateAdapter {
             return date.toDateString();
         }
     }
-    /** @nocollapse */ static ɵfac = function MgDateAdapter_Factory(__ngFactoryType__) { /* @ts-ignore */
-    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 },
@@ -7169,5 +7084,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, 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 };
+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