@magic-xpa/angular 4.1300.0-dev4130.22 → 4.1300.0-dev4130.222

package/fesm2022/magic-xpa-angular.mjs

@@ -6,13 +6,13 @@ import { DatePipe, CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from 'ng-dynamic-component';
+import * as i2$3 from 'ng-dynamic-component';
 import { DynamicModule } from 'ng-dynamic-component';
 import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, Events, Modifiers } from '@magic-xpa/gui';
 import { MagicBridge, getGuiEventObj, CookieService, Environment, LastFocusedManager } from '@magic-xpa/engine';
 import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, MsgInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
 import { filter, map, debounceTime, take } from 'rxjs/operators';
-import { Subject, EMPTY, fromEvent } from 'rxjs';
+import { Subject, EMPTY, fromEvent, Observable } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2$1 from '@angular/cdk/drag-drop';
 import { DragDropModule, CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
@@ -23,6 +23,7 @@ import { maskitoTimeOptionsGenerator } from '@maskito/kit';
 import * as i2$2 from '@angular/cdk/platform';
 import { MaskitoModule } from '@maskito/angular';
 import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { io } from 'socket.io-client';
 
 /**
  * @ignore
@@ -1003,6 +1004,61 @@ class GuiInteractiveExecutor {
     }
 }
 
+class MagicModalProperties {
+    static formName = "overlay";
+    static showTitleBar = true;
+    static x = 0;
+    static y = 0;
+    static width = "300px";
+    static height = "300px";
+    static isCenteredToWindow = true;
+    static shouldCloseOnBackgroundClick = true;
+    static isResizable = true;
+    static isMovable = true;
+    constructor(formName, showTitleBar, x, y, width, height, isCenteredToWindow, shouldCloseOnBackgroundClick, isResizable, isMovable) {
+        MagicModalProperties.formName = formName;
+        MagicModalProperties.showTitleBar = showTitleBar;
+        MagicModalProperties.x = x;
+        MagicModalProperties.y = y;
+        MagicModalProperties.width = width;
+        MagicModalProperties.height = height;
+        MagicModalProperties.isCenteredToWindow = isCenteredToWindow;
+        MagicModalProperties.shouldCloseOnBackgroundClick = shouldCloseOnBackgroundClick;
+        MagicModalProperties.isResizable = isResizable;
+        MagicModalProperties.isMovable = isMovable;
+    }
+    X() {
+        return MagicModalProperties.x;
+    }
+    Y() {
+        return MagicModalProperties.y;
+    }
+    Width() {
+        return MagicModalProperties.width;
+    }
+    Height() {
+        return MagicModalProperties.height;
+    }
+    IsCenteredToWindow() {
+        return MagicModalProperties.isCenteredToWindow;
+    }
+    FormName() {
+        return MagicModalProperties.formName;
+    }
+    ShowTitleBar() {
+        return MagicModalProperties.showTitleBar;
+    }
+    ShouldCloseOnBackgroundClick() {
+        return MagicModalProperties.shouldCloseOnBackgroundClick;
+    }
+    IsResizable() {
+        return MagicModalProperties.isResizable;
+    }
+    IsMovable() {
+        return MagicModalProperties.isMovable;
+    }
+}
+
 let BaseMagicOverlayContainer = class BaseMagicOverlayContainer {
 };
 __decorate([
@@ -1046,50 +1102,50 @@ class MagicViewContainerRef {
 
 const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
-function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 15);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "right")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 16);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "left")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "left")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_7_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 17);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "corner")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_8_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_8_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_8_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "bottom")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_div_9_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 19, 2);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "button", 20);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("movable", ctx_r2.IsMovable());
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("movable", ctx_r1.IsMovable());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getText(), " ");
 } }
 /**
  * Creates a modal window for Magic modal window components
@@ -1142,7 +1198,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     ngOnInit() {
         this.componentRef = this.modalbodyViewContainerRef.createComponent(this.ModalComp);
         Object.assign(this.componentRef.instance, this.ModalCompParameters);
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         this.isCenteredToWindow = comp.IsCenteredToWindow();
     }
     ngAfterViewInit() {
@@ -1161,7 +1217,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      */
     getText() {
         if (this.componentRef !== null) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             return comp.FormName();
         }
         else
@@ -1180,7 +1236,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     getStyle() {
         let styles = {};
         if (this.componentRef != undefined) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             styles['width'] = comp.Width();
             styles['height'] = comp.Height();
             if (this.isCenteredToWindow) {
@@ -1217,7 +1273,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      */
     getShowTitleBar() {
         if (this.componentRef != undefined) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             return comp.ShowTitleBar();
         }
     }
@@ -1231,7 +1287,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * Handles click in the background window
      */
     OnBackgroundClick() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         if (comp.ShouldCloseOnBackgroundClick())
             this.OnClose();
     }
@@ -1240,7 +1296,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is resizable, false otherwise.
      */
     IsResizable() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         return comp.IsResizable();
     }
     /**
@@ -1248,7 +1304,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is movable, false otherwise.
      */
     IsMovable() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         return comp.IsMovable();
     }
     /**
@@ -1342,45 +1398,53 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         this.resizing = false;
         this.resizeDirection = null;
     }
+    getOverlayProps() {
+        let obj = this.componentRef.instance;
+        if (obj && obj.magicModalProperties instanceof MagicModalProperties)
+            obj = obj.magicModalProperties;
+        return obj;
+    }
     /** @nocollapse */ static ɵfac = function MagicOverlayContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainer)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5);
-            i0.ɵɵviewQuery(_c1$1, 5);
+            i0.ɵɵviewQuery(_c0$3, 5)(_c1$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
         } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, false, i0.ɵɵresolveWindow);
-        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 9, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle left", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "left", 3, "mousedown"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, i0.ɵɵresolveWindow);
+        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 9, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], [1, "dragHandle", "right"], [1, "dragHandle", "left"], [1, "dragHandle", "corner"], [1, "dragHandle", "bottom"], ["cdkDragHandle", "", 1, "modal-header", 3, "movable"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "left", 3, "mousedown"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
-            i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBackgroundClick()); });
-            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 5);
+            i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { return ctx.OnBackgroundClick(); });
+            i0.ɵɵconditionalCreate(2, MagicOverlayContainer_Conditional_2_Template, 2, 0, "button", 5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "div", 6, 0);
-            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 1, 0, "span", 7)(6, MagicOverlayContainer_span_6_Template, 1, 0, "span", 8)(7, MagicOverlayContainer_span_7_Template, 1, 0, "span", 9)(8, MagicOverlayContainer_span_8_Template, 1, 0, "span", 10)(9, MagicOverlayContainer_div_9_Template, 5, 3, "div", 11);
+            i0.ɵɵconditionalCreate(5, MagicOverlayContainer_Conditional_5_Template, 1, 0, "span", 7);
+            i0.ɵɵconditionalCreate(6, MagicOverlayContainer_Conditional_6_Template, 1, 0, "span", 8);
+            i0.ɵɵconditionalCreate(7, MagicOverlayContainer_Conditional_7_Template, 1, 0, "span", 9);
+            i0.ɵɵconditionalCreate(8, MagicOverlayContainer_Conditional_8_Template, 1, 0, "span", 10);
+            i0.ɵɵconditionalCreate(9, MagicOverlayContainer_Conditional_9_Template, 5, 3, "div", 11);
             i0.ɵɵelementStart(10, "div", 12);
             i0.ɵɵelement(11, "div", 13, 1);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.getShowTitleBar());
+            i0.ɵɵconditional(!ctx.getShowTitleBar() ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getStyle())("cdkDragDisabled", !ctx.IsMovable());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.IsResizable() && !ctx.isRtl);
+            i0.ɵɵconditional(ctx.IsResizable() && !ctx.isRtl ? 5 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable() && ctx.isRtl);
+            i0.ɵɵconditional(ctx.IsResizable() && ctx.isRtl ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵconditional(ctx.IsResizable() ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵconditional(ctx.IsResizable() ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
+            i0.ɵɵconditional(ctx.getShowTitleBar() ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}[dir=\"rtl\"][_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%], [dir=\"rtl\"]   [_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%]{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left[_ngcontent-%COMP%]{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
+        } }, dependencies: [i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}[dir=\"rtl\"][_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%], [dir=\"rtl\"]   [_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%]{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left[_ngcontent-%COMP%]{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
@@ -1388,20 +1452,32 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     <div class="boundary-line">
 
       <div class="modal-background" (click)="OnBackgroundClick()">
-        <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white" *ngIf="!getShowTitleBar()">X</button>
+        @if (!getShowTitleBar()) {
+          <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white">X</button>
+        }
       </div>
 
       <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()" cdkDragBoundary=".boundary-line" cdkDrag [cdkDragDisabled]="!IsMovable()">
 
-        <span *ngIf="IsResizable() && !isRtl" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
-        <span *ngIf="IsResizable() && isRtl" class="dragHandle left" (mousedown)="onResizeStart($event, 'left')"></span>
-        <span *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
-        <span *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+        @if (IsResizable() && !isRtl) {
+          <span class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
+        }
+        @if (IsResizable() && isRtl) {
+          <span class="dragHandle left" (mousedown)="onResizeStart($event, 'left')"></span>
+        }
+        @if (IsResizable()) {
+          <span class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
+        }
+        @if (IsResizable()) {
+          <span class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+        }
 
-        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()" cdkDragHandle [class.movable]="IsMovable()">
-          {{getText()}}
-          <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
-        </div>
+        @if (getShowTitleBar()) {
+          <div #modalheader class="modal-header" cdkDragHandle [class.movable]="IsMovable()">
+            {{getText()}}
+            <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
+          </div>
+        }
 
         <div [ngStyle]="getClientAreaStyles()">
           <div #modalbody magicViewContainerRef>
@@ -1409,7 +1485,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         </div>
       </div>
     </div>
-  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}:host-context([dir=\"rtl\"]) .dragHandle.corner{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
+    `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}:host-context([dir=\"rtl\"]) .dragHandle.corner{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
     }], () => [], { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
@@ -1429,7 +1505,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: HostListener,
             args: ['window:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 65 }); })();
 
 /**
  * Service managing overlay windows
@@ -1697,7 +1773,7 @@ class MagicAlertComponent extends BaseMagicAlertComponent {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+            i0.ɵɵtextInterpolate1(" ", ctx.title);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1("", ctx.message, " ");
         } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}"] });
@@ -1736,7 +1812,7 @@ class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+            i0.ɵɵtextInterpolate1(" ", ctx.title);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.message, " ");
         } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel[_ngcontent-%COMP%]{background-color:#c1c1c1}"] });
@@ -2981,12 +3057,13 @@ class TaskMagicService {
     }
     /**
      * Handle the Radio button "change" event
-     * @param  event The event received from the UI
      * @param idx Id of the control raising the event
+     * @param rowId Id of the row containing the control (defaults to '0' for non-table controls)
      */
-    mgOnRadioSelectionChanged(idx) {
-        let result = this.getFormControl('0', idx);
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+    mgOnRadioSelectionChanged(idx, rowId = '0') {
+        // Fetch the Form Control for the specific table row (or row '0' for non-table child controls)
+        let result = this.getFormControl(rowId, idx);
+        let guiEvent = getGuiEventObj('selectionchanged', idx, +rowId);
         if (typeof result.value !== 'number')
             guiEvent.Value = result.value.index;
         else
@@ -5616,8 +5693,8 @@ class RangeValidatorMagicDirective {
             }]
     }], () => [{ type: TaskMagicService }, { type: i0.ViewContainerRef }], null); })();
 
-function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ndc-dynamic", 1);
+function SubformMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ndc-dynamic", 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
@@ -5663,34 +5740,35 @@ class SubformMagicComponent {
         return this.mgSub.mgGetParameters(this.id);
     }
     /** @nocollapse */ static ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, standalone: false, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, SubformMagicComponent_ndc_dynamic_0_Template, 1, 2, "ndc-dynamic", 0);
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, standalone: false, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SubformMagicComponent_Conditional_0_Template, 1, 2, "ndc-dynamic", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.Component);
-        } }, dependencies: [i1.NgIf, i3.DynamicIoDirective, i3.DynamicComponent], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.Component ? 0 : -1);
+        } }, dependencies: [i2$3.DynamicIoDirective, i2$3.DynamicComponent], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-subform',
-                template: `
-    <ndc-dynamic
-      *ngIf="Component"  
-      [ndcDynamicComponent]="Component" 
-      [ndcDynamicInputs]="Parameters">
-    </ndc-dynamic>
-`,
+                template: `
+    @if (Component) {
+      <ndc-dynamic
+        [ndcDynamicComponent]="Component"
+        [ndcDynamicInputs]="Parameters">
+      </ndc-dynamic>
+    }
+    `,
                 standalone: false
             }]
     }], () => [{ type: i0.ViewContainerRef }, { type: SubformMagicService }], { magic: [{
             type: Input,
             args: ['magic']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 23 }); })();
 
 const _c0$1 = ["customContent"];
 const _c1 = ["*"];
-function ErrorMagicComponent_div_0_span_4_Template(rf, ctx) { if (rf & 1) {
+function ErrorMagicComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -5699,16 +5777,16 @@ function ErrorMagicComponent_div_0_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.mgService.getErrMsg(ctx_r0.id, ctx_r0.rowId), " ");
 } }
-function ErrorMagicComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function ErrorMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "div", null, 0);
     i0.ɵɵprojection(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ErrorMagicComponent_div_0_span_4_Template, 2, 1, "span", 1);
+    i0.ɵɵconditionalCreate(4, ErrorMagicComponent_Conditional_0_Conditional_4_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r0.defaultDisplay);
+    i0.ɵɵconditional(ctx_r0.defaultDisplay ? 4 : -1);
 } }
 /**
  * Represents a Magic subform
@@ -5792,25 +5870,29 @@ class ErrorMagicComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
-        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"] }, standalone: false, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""], [4, "ngIf"]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"] }, standalone: false, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 1);
+            i0.ɵɵconditionalCreate(0, ErrorMagicComponent_Conditional_0_Template, 5, 1, "div");
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
-        } }, dependencies: [i1.NgIf], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.HasErrors(ctx.id) ? 0 : -1);
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
-                template: `<div *ngIf="HasErrors(id)">
-    <div #customContent>
-      <ng-content></ng-content>
-    </div>
-     <span *ngIf="defaultDisplay">
-      {{mgService.getErrMsg(id, rowId)}} 
-    </span>
-    </div>
+                template: `@if (HasErrors(id)) {
+  <div>
+    <div #customContent>
+      <ng-content></ng-content>
+    </div>
+    @if (defaultDisplay) {
+      <span>
+        {{mgService.getErrMsg(id, rowId)}}
+      </span>
+    }
+  </div>
+}
 `,
                 standalone: false
             }]
@@ -5824,7 +5906,7 @@ class ErrorMagicComponent {
             type: ViewChild,
             args: ['customContent', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 28 }); })();
 
 /**
  * Directive for checkboxes, to handle the 'change' event
@@ -5993,15 +6075,15 @@ class ExitMagicService {
     }], null, null); })();
 
 const _c0 = ["magicRoot"];
-function MagicShellComponent_ndc_dynamic_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ndc-dynamic", 6);
+function MagicShellComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ndc-dynamic", 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.RootComponent)("ndcDynamicInputs", ctx_r0.RootComponentParameters);
 } }
-function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵelementContainer(1, 8);
+function MagicShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelementContainer(1, 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -6010,7 +6092,7 @@ function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.SpinnerTemplate ? ctx_r0.SpinnerTemplate : defaultSpinner_r2);
 } }
 function MagicShellComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 9);
+    i0.ɵɵelement(0, "div", 7);
 } }
 /**
  * Root Magic component
@@ -6205,46 +6287,50 @@ class MagicShellComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
         } }, hostBindings: function MagicShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, false, i0.ɵɵresolveWindow)("unload", function MagicShellComponent_unload_HostBindingHandler($event) { return ctx.onUnload($event); }, false, i0.ɵɵresolveWindow);
+            i0.ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, i0.ɵɵresolveWindow)("unload", function MagicShellComponent_unload_HostBindingHandler($event) { return ctx.onUnload($event); }, i0.ɵɵresolveWindow);
         } }, inputs: { SpinnerTemplate: "SpinnerTemplate" }, standalone: false, features: [i0.ɵɵProvidersFeature([
             // ExitMagicService
-            ])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["class", "spinner-background", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs"], ["magicViewContainerRef", ""], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", null, 0);
-            i0.ɵɵtemplate(2, MagicShellComponent_ndc_dynamic_2_Template, 1, 2, "ndc-dynamic", 3);
+            i0.ɵɵconditionalCreate(2, MagicShellComponent_Conditional_2_Template, 1, 2, "ndc-dynamic", 3);
             i0.ɵɵelement(3, "div", 4, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, MagicShellComponent_div_5_Template, 2, 1, "div", 5)(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(5, MagicShellComponent_Conditional_5_Template, 2, 1, "div", 5);
+            i0.ɵɵtemplate(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.RootComponent !== null);
+            i0.ɵɵconditional(ctx.RootComponent !== null ? 2 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.showSpinner);
-        } }, dependencies: [i1.NgIf, i1.NgTemplateOutlet, i3.DynamicIoDirective, i3.DynamicComponent, MagicViewContainerRef], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:_ngcontent-%COMP%_spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+            i0.ɵɵconditional(ctx.showSpinner ? 5 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2$3.DynamicIoDirective, i2$3.DynamicComponent, MagicViewContainerRef], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:_ngcontent-%COMP%_spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
         args: [{ selector: 'magic-root', providers: [
                 // ExitMagicService
-                ], template: `
-    <div #magicRoot>
-      <ndc-dynamic
-        *ngIf = "RootComponent !== null"
-        [ndcDynamicComponent]="RootComponent"
-        [ndcDynamicInputs]   ="RootComponentParameters">
-      </ndc-dynamic>
-
-      <div #overlayWindowsContainer magicViewContainerRef>
-      </div>
-    </div>
-
-    <div class="spinner-background" *ngIf="showSpinner">
-      <ng-container [ngTemplateOutlet]="SpinnerTemplate ? SpinnerTemplate:defaultSpinner"></ng-container>
-    </div>
-
-    <ng-template #defaultSpinner>
-      <div class="mgSpinnerClass"></div>
-    </ng-template>
-  `, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                ], template: `
+    <div #magicRoot>
+      @if (RootComponent !== null) {
+        <ndc-dynamic
+          [ndcDynamicComponent]="RootComponent"
+          [ndcDynamicInputs]   ="RootComponentParameters">
+        </ndc-dynamic>
+      }
+    
+      <div #overlayWindowsContainer magicViewContainerRef>
+      </div>
+    </div>
+    
+    @if (showSpinner) {
+      <div class="spinner-background">
+        <ng-container [ngTemplateOutlet]="SpinnerTemplate ? SpinnerTemplate:defaultSpinner"></ng-container>
+      </div>
+    }
+    
+    <ng-template #defaultSpinner>
+      <div class="mgSpinnerClass"></div>
+    </ng-template>
+    `, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], () => [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ExitMagicService, decorators: [{
                 type: Optional
             }] }], { rootMagicElementRef: [{
@@ -6259,7 +6345,7 @@ class MagicShellComponent {
             type: HostListener,
             args: ['window:unload', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 86 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 89 }); })();
 
 /**
  * @ignore
@@ -6860,6 +6946,109 @@ const magicProviders = [
     TableMagicService
 ];
 
+class SubscriberService {
+    static instance;
+    socket;
+    constructor() {
+        // Connect to the Socket.IO server with subscriber role
+        this.socket = io('http://localhost:3000', {
+            query: {
+                role: 'subscriber',
+                token: 'abc123' // Default token for testing; replace with actual authentication
+            }
+        });
+        // Handle connection
+        this.socket.on('connect', () => {
+            console.log('Connected to server as subscriber:', this.socket.id);
+        });
+        // Handle disconnection
+        this.socket.on('disconnect', () => {
+            console.log('Disconnected from server');
+        });
+        // Handle subscription confirmation
+        this.socket.on('subscribed', (data) => {
+            console.log('Subscribed to topic:', data.topic, data.message);
+        });
+        // Handle unsubscription confirmation
+        this.socket.on('unsubscribed', (data) => {
+            console.log('Unsubscribed from topic:', data.topic, data.message);
+        });
+        // Handle errors
+        this.socket.on('error', (error) => {
+            console.error('Socket error:', error.message);
+        });
+        this.socket.on('message', (error) => {
+            console.error('Message from xpa:', error.message);
+        });
+    }
+    /**
+     * Subscribe to a specific topic
+     * @param topic The topic to subscribe to
+     */
+    subscribe(topic) {
+        this.socket.emit('subscribe', topic);
+    }
+    /**
+     * Unsubscribe from a specific topic
+     * @param topic The topic to unsubscribe from
+     */
+    unsubscribe(topic) {
+        this.socket.emit('unsubscribe', topic);
+    }
+    /**
+     * Get an Observable for incoming messages
+     * @returns Observable that emits message data
+     */
+    onMessage() {
+        return new Observable(observer => {
+            this.socket.on('message', (data) => {
+                observer.next(data);
+            });
+        });
+    }
+    /**
+     * Get current subscriptions (for debugging)
+     */
+    getSubscriptions() {
+        this.socket.emit('getSubscriptions');
+    }
+    /**
+     * Listen for subscriptions data
+     * @returns Observable that emits subscriptions list
+     */
+    onSubscriptionsData() {
+        return new Observable(observer => {
+            this.socket.on('subscriptionsData', (data) => {
+                observer.next(data);
+            });
+        });
+    }
+    /**
+     * Get the singleton instance of SubscriberService
+     * @returns {SubscriberService} The singleton instance
+     */
+    static getInstance() {
+        if (!SubscriberService.instance) {
+            SubscriberService.instance = new SubscriberService();
+        }
+        return SubscriberService.instance;
+    }
+    /**
+     * Disconnect from the server
+     */
+    disconnect() {
+        this.socket.disconnect();
+    }
+    /** @nocollapse */ static ɵfac = function SubscriberService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubscriberService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SubscriberService, factory: SubscriberService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubscriberService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [], null); })();
+
 /**
  * @ignore
  */
@@ -6945,5 +7134,5 @@ class ModalFormDefinition {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
+export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModalProperties, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, SubscriberService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
 //# sourceMappingURL=magic-xpa-angular.mjs.map