@magic-xpa/angular 4.1000.0-dev4100.30 → 4.1000.0-dev4100.302

package/fesm2020/magic-xpa-angular.mjs

@@ -596,6 +596,9 @@ SubformMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicServic
     }], function () { return [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.Compiler }]; }, null); })();
 
 class RouterContainerMagicComponent {
+    static get LastRoute() {
+        return RouterContainerMagicComponent.lastRoute;
+    }
     constructor(activatedRoute, router, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
         this.activatedRoute = activatedRoute;
         this.router = router;
@@ -609,9 +612,6 @@ class RouterContainerMagicComponent {
         this.componentRef = null;
         this.parentMgSubformService = null;
     }
-    static get LastRoute() {
-        return RouterContainerMagicComponent.lastRoute;
-    }
     ngOnInit() {
         let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
         let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
@@ -820,7 +820,7 @@ const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 8);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.OnClose(); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
@@ -829,7 +829,7 @@ function MagicOverlayContainer_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9, 10);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "button", 11);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.OnClose(); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -934,7 +934,7 @@ MagicOverlayContainer.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContain
         i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-    } }, directives: [i1.NgIf, i1.NgStyle, 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}"] });
+    } }, dependencies: [i1.NgIf, i1.NgStyle, 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}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
         args: [{ selector: 'app-magic-overlay-container', template: `
@@ -988,14 +988,10 @@ class BaseMagicConfirmComponent {
     }
 }
 BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-BaseMagicConfirmComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, styles: [""] });
+BaseMagicConfirmComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
-        args: [{
-                selector: 'mg-base-alert',
-                template: '',
-                styles: ['']
-            }]
+        args: [{ selector: 'mg-base-alert', template: '' }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1013,14 +1009,10 @@ class BaseMagicAlertComponent {
     }
 }
 BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-BaseMagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, styles: [""] });
+BaseMagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
-        args: [{
-                selector: 'mg-base-alert',
-                template: '',
-                styles: ['']
-            }]
+        args: [{ selector: 'mg-base-alert', template: '' }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1128,12 +1120,10 @@ MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlay
         i0.ɵɵelementEnd();
         i0.ɵɵelement(6, "div", 5);
         i0.ɵɵelementEnd();
-    } }, directives: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;z-index:999;inset:0}"] });
+    } }, dependencies: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;z-index:999;inset:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
         type: Component,
-        args: [{
-                selector: 'app-magic-overlay-container-wrapper',
-                template: `
+        args: [{ selector: 'app-magic-overlay-container-wrapper', template: `
     <div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" magicFocus></div>
       <div class="overlay-container-wrapper-background" #overlayContainerWrapper>
@@ -1142,19 +1132,7 @@ MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlay
       </div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" ></div>
     </div>
-  `,
-                styles: [`
-    .overlay-container-wrapper-background {
-      /* modal background fixed across whole screen */
-      position: fixed;
-      top: 0;
-      z-index: 999;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  `]
-            }]
+  `, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
     }], function () { return [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Compiler }]; }, { Component: [{
             type: Input
         }], Parameters: [{
@@ -1190,46 +1168,14 @@ MagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicAlertComponent,
     } }, 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;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAlertComponent, [{
         type: Component,
-        args: [{
-                selector: 'sample-magic-alert-component',
-                template: `<div>
+        args: [{ selector: 'sample-magic-alert-component', template: `<div>
     <div class="mg-message-background">
       <h2> {{title}}</h2>
       <p>{{message}} </p>
 
       <button (click)="OnClose()">OK</button>
     </div>
-  </div>`,
-                styles: [`
-    .mg-message-background {
-  background-color: #F5F5F5;
-  text-align: center;
-  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 {
-  background-color: #8CD4F5;
-  color: white;
-  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 5px;
-  cursor: pointer;
-  }
-  `]
-            }]
+  </div>`, styles: [".mg-message-background{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{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
     }], null, null); })();
 
 class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
@@ -1257,9 +1203,7 @@ MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfir
     } }, 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;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel[_ngcontent-%COMP%]{background-color:#c1c1c1}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
         type: Component,
-        args: [{
-                selector: 'sample-magic-confirmation-box',
-                template: `<div>
+        args: [{ selector: 'sample-magic-confirmation-box', template: `<div>
     <div class="mg-message-background">
       <h2> {{title}}</h2>
       {{message}}
@@ -1269,41 +1213,7 @@ MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfir
       <button (click)="OnClose(true)">OK</button>
       <button class="cancel" (click)="OnClose(false)">Cancel</button>
     </div>
-  </div>`,
-                styles: [`
-    .mg-message-background {
-  background-color: #F5F5F5;
-  text-align: center;
-  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 {
-  background-color: #8CD4F5;
-  color: white;
-  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 5px;
-  cursor: pointer;
-  }
-    
-    button.cancel {
-      background-color: #C1C1C1;
-    }
-  `]
-            }]
+  </div>`, styles: [".mg-message-background{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{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
     }], null, null); })();
 
 class ConfirmationComponentsMagicProvider {
@@ -1569,6 +1479,7 @@ class TaskMagicService {
         this.OnSelectedRowChanged = new EventEmitter();
         this.customPropertiesSubject = new Subject();
         this.recordsCountChangeSubject = new Subject();
+        this.mgLoadSubject = new Subject();
         this.oldPageSize = 0;
         this.Records.setGuiTopIndex(0);
         this.mgInputDateFormat = null;
@@ -1903,6 +1814,9 @@ class TaskMagicService {
             case CommandType.SET_FOCUS:
                 this.refreshDom.next(command);
                 break;
+            case CommandType.SET_WC_IDLE:
+                this.mgLoadSubject.next();
+                break;
         }
     }
     customValidator(rowid, id) {
@@ -1961,7 +1875,10 @@ class TaskMagicService {
                     return val;
             }
             case StorageAttribute.NUMERIC:
-                return +val;
+                if (isUndefined(val))
+                    return val;
+                else
+                    return (val != null) ? +val : null;
             default:
                 return val;
         }
@@ -2098,10 +2015,10 @@ class TaskMagicService {
     mgOnRadioSelectionChanged(idx) {
         let result = this.getFormControl('0', idx);
         let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        if (typeof result.value !== 'string')
+        if (typeof result.value !== 'number')
             guiEvent.Value = result.value.index;
         else
-            guiEvent.Value = result.value;
+            guiEvent.Value = result.value.toString();
         this.insertEvent(guiEvent);
     }
     close() {
@@ -2244,6 +2161,9 @@ const SYSTEM_BG = 4;
 const SYSTEM_FG_AND_SYSTEM_BG = 6;
 const TRANSPERENT_BG = 1;
 class MagicColorService {
+    getColorFilePath() {
+        return 'assets/' + this.colorFileName;
+    }
     constructor(http, colorFile1 = 'clr_rnt.eng') {
         this.http = http;
         this.colorFileName = 'clr_rnt.eng';
@@ -2253,9 +2173,6 @@ class MagicColorService {
         else
             this.colorFileName = 'clr_rnt.eng';
     }
-    getColorFilePath() {
-        return 'assets/' + this.colorFileName;
-    }
     getColorData() {
         if (!this.colorsData) {
             this.http.get(this.getColorFilePath(), { responseType: 'text' }).subscribe(resp => {
@@ -2568,8 +2485,30 @@ class AccessorMagicService {
         let c = this.task.getFormControl(rowId, id);
         if (c.hasError('required'))
             return 'Control must be updated.';
-        if (c.hasError('pattern'))
-            return 'Required pattern is : ' + c.errors.pattern.requiredPattern;
+        if (c.hasError('pattern')) {
+            if (c.errors.pattern.actualValue < 0 && !c.errors.pattern.requiredPattern.includes('-'))
+                return 'Value must be non-negative';
+            if (c.errors.pattern.requiredPattern.includes('.')) {
+                const numericFormat = Math.abs(c.errors.pattern.actualValue).toString().split('.')[0];
+                const decimalFormat = Math.abs(c.errors.pattern.actualValue).toString().split('.')[1];
+                const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
+                const actualDecimalLimit = c.errors.pattern.requiredPattern.match(/(?:[^,]+,){2}(\d+)/)[1];
+                if (numericFormat.length > actualNumericLimit || decimalFormat.length > actualDecimalLimit) {
+                    return "Numeric format is limited to " + actualNumericLimit + "." + actualDecimalLimit + " digits";
+                }
+            }
+            else if (!c.errors.pattern.requiredPattern.includes('.') && !Number.isInteger(c.errors.pattern.actualValue)) {
+                const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
+                return "Numeric format is limited to " + actualNumericLimit + "." + 0 + " digits";
+            }
+            else {
+                const numericFormat = Math.abs(c.errors.pattern.actualValue).toString();
+                const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
+                if (numericFormat.length > actualNumericLimit) {
+                    return "Numeric format is limited to " + actualNumericLimit + "." + 0 + " digits";
+                }
+            }
+        }
         if (c.hasError('rangevalidator'))
             return c.errors.rangevalidator.errorMsg;
         if (c.hasError('maxlength'))
@@ -2705,6 +2644,9 @@ class TaskBaseMagicComponent {
         this.task.recordsCountChangeSubject.pipe().subscribe(value => {
             this.RecordsCountChanged(value);
         });
+        this.task.mgLoadSubject.pipe().subscribe(value => {
+            this.mgOnLoad();
+        });
     }
     createFormControlsAccessor(formGroup) { }
     setInputDateFormat() { }
@@ -2712,6 +2654,8 @@ class TaskBaseMagicComponent {
     }
     RecordsCountChanged(recordsCount) {
     }
+    mgOnLoad() {
+    }
     ngAfterViewInit() {
         this.mgSub.init();
     }
@@ -2792,6 +2736,16 @@ RowMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: RowMagicDirective, sele
         }] }); })();
 
 class MagicDirective {
+    set magic(val) {
+        this.id = val;
+        this.selector = "magic";
+    }
+    ;
+    set eventsOnly(val) {
+        console.log("eventsOnly");
+        this.eventsOnlyVal = true;
+    }
+    ;
     constructor(_task, element, renderer, vcRef, magicRow) {
         this._task = _task;
         this.element = element;
@@ -2804,16 +2758,6 @@ class MagicDirective {
         if (!(typeof magicRow === "undefined" || magicRow === null))
             this.rowId = magicRow.rowId;
     }
-    set magic(val) {
-        this.id = val;
-        this.selector = "magic";
-    }
-    ;
-    set eventsOnly(val) {
-        console.log("eventsOnly");
-        this.eventsOnlyVal = true;
-    }
-    ;
     get task() {
         return this._task;
     }
@@ -2989,11 +2933,11 @@ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors:
         }] }); })();
 
 class NoControlMagicDirective extends MagicDirective {
+    set magic(val) { this.id = val; this.selector = 'magicnc'; }
+    ;
     constructor(_task, element, renderer, vcRef, magicRow) {
         super(_task, element, renderer, vcRef, magicRow);
     }
-    set magic(val) { this.id = val; this.selector = 'magicnc'; }
-    ;
     regEvents() {
         super.regEvents();
         if (this.htmlElement instanceof HTMLSelectElement) {
@@ -3602,14 +3546,14 @@ function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
 } }
 class SubformMagicComponent {
+    set magic(val) { this.id = val; }
+    ;
     constructor(vcRef, mgSub) {
         this.vcRef = vcRef;
         this.mgSub = mgSub;
         this.component = null;
         this.component = (this.vcRef._hostLView).find(v => !isNullOrUndefined(v));
     }
-    set magic(val) { this.id = val; }
-    ;
     get Component() {
         return this.mgSub.mgGetComp(this.id);
     }
@@ -3622,7 +3566,7 @@ SubformMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SubformMagicCompone
         i0.ɵɵtemplate(0, SubformMagicComponent_ndc_dynamic_0_Template, 1, 2, "ndc-dynamic", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.Component);
-    } }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
+    } }, dependencies: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
@@ -3663,13 +3607,6 @@ function ErrorMagicComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } }
 const _c1 = ["*"];
 class ErrorMagicComponent {
-    constructor(_task, mgService, changeDetectorRef) {
-        this._task = _task;
-        this.mgService = mgService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.defaultDisplay = true;
-        this.rowId = "0";
-    }
     set magic(val) {
         this.id = val;
     }
@@ -3683,6 +3620,13 @@ class ErrorMagicComponent {
         this.changeDetectorRef.detectChanges();
     }
     ;
+    constructor(_task, mgService, changeDetectorRef) {
+        this._task = _task;
+        this.mgService = mgService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.defaultDisplay = true;
+        this.rowId = "0";
+    }
     isEmpty(element) {
         const nodes = element.childNodes;
         for (let i = 0; i < nodes.length; i++) {
@@ -3725,7 +3669,7 @@ ErrorMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent,
         i0.ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
-    } }, directives: [i1.NgIf], encapsulation: 2 });
+    } }, dependencies: [i1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
@@ -3951,13 +3895,10 @@ MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent,
         i0.ɵɵproperty("ngIf", ctx.RootComponent !== null);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.showSpinner);
-    } }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective, MagicViewContainerRef, i1.NgTemplateOutlet], 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:spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+    } }, dependencies: [i1.NgIf, i1.NgTemplateOutlet, i3.DynamicComponent, i3.DynamicIoDirective, 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)}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
-        args: [{
-                selector: 'magic-root',
-                providers: [],
-                template: `
+        args: [{ selector: 'magic-root', providers: [], template: `
     <div #magicRoot>
       <ndc-dynamic
         *ngIf = "RootComponent !== null"
@@ -3976,38 +3917,7 @@ MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent,
     <ng-template #defaultSpinner>
       <div class="mgSpinnerClass"></div>
     </ng-template>
-  `,
-                styles: [`
-    .mgSpinnerClass {
-      border: 10px solid #cccccc; /* Light grey */
-      border-top: 10px solid black; /* Blue */
-      border-radius: 50%;
-      position: fixed;
-      margin: auto;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 100px;
-      height: 100px;
-      animation: spin 2s linear infinite;
-    }
-    .spinner-background {
-      /* background fixed across whole screen */
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1000;
-      left: 0;
-      opacity: 0.5;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  `]
-            }]
+  `, 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"] }]
     }], function () { return [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: ExitMagicService, decorators: [{
                 type: Optional
             }] }]; }, { rootMagicElementRef: [{
@@ -4173,6 +4083,11 @@ DateValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, sele
         }] }); })();
 
 class NonMagicControlDirective {
+    set magic(val) {
+        this.id = val;
+        this.selector = 'NonMagicControl';
+    }
+    ;
     constructor(_task, element, renderer, vcRef) {
         this._task = _task;
         this.element = element;
@@ -4182,11 +4097,6 @@ class NonMagicControlDirective {
         this.eventsOnlyVal = false;
         this.htmlElement = this.element.nativeElement;
     }
-    set magic(val) {
-        this.id = val;
-        this.selector = 'NonMagicControl';
-    }
-    ;
     get task() {
         return this._task;
     }
@@ -4250,14 +4160,12 @@ class MagicModule {
 }
 MagicModule.ɵfac = function MagicModule_Factory(t) { return new (t || MagicModule)(); };
 MagicModule.ɵmod = i0.ɵɵdefineNgModule({ type: MagicModule });
-MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            RouterModule,
-            DynamicModule,
-            HttpClientModule
-        ]] });
+MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        DynamicModule,
+        HttpClientModule] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
         args: [{