npm - @magic-xpa/angular - Versions diffs - 4.801.0-dev481.243 → 4.801.0-dev481.249 - Mend

@magic-xpa/angular 4.801.0-dev481.243 → 4.801.0-dev481.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (127) hide show

package/{fesm2015/magic-xpa-angular.js → fesm2020/magic-xpa-angular.mjs} RENAMED Viewed

@@ -1,20 +1,24 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
-import { ɵɵdefineInjectable, ɵsetClassMetadata, Injectable, ɵɵinject, NgModuleFactoryLoader, Injector, ɵɵdirectiveInject, ComponentFactoryResolver, ViewContainerRef, ɵɵdefineComponent, Component, Input, Output, ɵɵdefineDirective, Directive, ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵtext, ɵɵelementEnd, ɵɵadvance, ɵɵtextInterpolate1, EventEmitter, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵelement, ɵɵproperty, ViewChild, ElementRef, ChangeDetectorRef, ɵɵstaticViewQuery, ɵɵgetInheritedFactory, ɵɵProvidersFeature, HostListener, Renderer2, Optional, ɵɵdefinePipe, Pipe, ɵɵprojection, ɵɵprojectionDef, ɵɵelementContainer, ɵɵreference, ɵɵresolveWindow, ɵɵtemplateRefExtractor, forwardRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
-import { NgIf, NgStyle, DatePipe, NgTemplateOutlet, CommonModule, formatDate } from '@angular/common';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, Output, Directive, EventEmitter, ViewChild, HostListener, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DatePipe, CommonModule, formatDate } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DynamicComponent, DynamicIoDirective, DynamicModule } from 'ng-dynamic-component';
-import { __awaiter, __decorate, __metadata } from 'tslib';
-import { Subject } from 'rxjs';
-import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
+import * as i3 from 'ng-dynamic-component';
+import { DynamicModule } from 'ng-dynamic-component';
 import { InteractiveCommandType, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
+import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
 import { MagicProperties, Logger, StrUtil, StorageAttribute, BindingLevel, StorageAttributeType, PICInterface } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
-import { Title } from '@angular/platform-browser';
-import { fromEvent } from 'rxjs/internal/observable/fromEvent';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { Subject, fromEvent } from 'rxjs';
+import { __decorate, __metadata } from 'tslib';
+import * as i1$1 from '@angular/platform-browser';
+import * as i5 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
-import { Platform } from '@angular/cdk/platform';
+import * as i1$2 from '@angular/cdk/platform';
 class ControlMetadata {
     constructor() {
@@ -195,6 +199,32 @@ var HtmlClasses;
     HtmlClasses["HintColor"] = "hintcolor";
 })(HtmlClasses || (HtmlClasses = {}));
+class StylesMapManager {
+    static magicValueGetStyle(styleName, magicValue) {
+        let style = "";
+        if (!isNullOrUndefined(magicValue)) {
+            let value = StylesMapManager.StylesMap.get(styleName);
+            if (value.constructor === Map) {
+                style = value.get(magicValue);
+            }
+            else if (value.constructor === String) {
+                style = NString.Format(value.toString(), magicValue);
+            }
+        }
+        return style;
+    }
+}
+StylesMapManager.StylesMap = new Map([
+    [MagicProperties.LineDivider, new Map([[true, "solid"], [false, "hidden"]])],
+    [MagicProperties.ImageFile, "url('\{0}\')"],
+    [MagicProperties.Wallpaper, "url('\{0}\')"]
+]);
+StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
+    [MagicProperties.LineDivider, "border-bottom-style"],
+    [MagicProperties.ImageFile, "background-image"],
+    [MagicProperties.Wallpaper, "background-image"]
+]);
 class EngineMagicService {
     constructor() {
         this.magicBridge = MagicBridge;
@@ -227,10 +257,8 @@ class EngineMagicService {
         });
         this.magicBridge.Initialize(httpClient);
     }
-    terminateMagic() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.magicBridge.TerminateMagic();
-        });
+    async terminateMagic() {
+        await this.magicBridge.TerminateMagic();
     }
     insertEvent(guiEvent) {
         if (!this.isStub)
@@ -267,9 +295,12 @@ class EngineMagicService {
     }
 }
 EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
-EngineMagicService.ɵprov = ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
-(function () { ɵsetClassMetadata(EngineMagicService, [{
-        type: Injectable
+EngineMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EngineMagicService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
     }], null, null); })();
 class ComponentListMagicService {
@@ -306,33 +337,15 @@ class ComponentListMagicService {
     getLazyLoadModuleData(name) {
         return (this.lazyLoadModulesMap != null && this.lazyLoadModulesMap.hasOwnProperty(name)) ? this.lazyLoadModulesMap[name] : null;
     }
-}
-class StylesMapManager {
-    static magicValueGetStyle(styleName, magicValue) {
-        let style = "";
-        if (!isNullOrUndefined(magicValue)) {
-            let value = StylesMapManager.StylesMap.get(styleName);
-            if (value.constructor === Map) {
-                style = value.get(magicValue);
-            }
-            else if (value.constructor === String) {
-                style = NString.Format(value.toString(), magicValue);
-            }
-        }
-        return style;
-    }
 }
-StylesMapManager.StylesMap = new Map([
-    [MagicProperties.LineDivider, new Map([[true, "solid"], [false, "hidden"]])],
-    [MagicProperties.ImageFile, "url('\{0}\')"],
-    [MagicProperties.Wallpaper, "url('\{0}\')"]
-]);
-StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
-    [MagicProperties.LineDivider, "border-bottom-style"],
-    [MagicProperties.ImageFile, "background-image"],
-    [MagicProperties.Wallpaper, "background-image"]
-]);
+ComponentListMagicService.ɵfac = function ComponentListMagicService_Factory(t) { return new (t || ComponentListMagicService)(); };
+ComponentListMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: ComponentListMagicService, factory: ComponentListMagicService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentListMagicService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
 class CommandsCollectorMagicService {
     constructor(magic) {
@@ -365,10 +378,13 @@ class CommandsCollectorMagicService {
         return commands;
     }
 }
-CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(ɵɵinject(EngineMagicService)); };
-CommandsCollectorMagicService.ɵprov = ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
-(function () { ɵsetClassMetadata(CommandsCollectorMagicService, [{
-        type: Injectable
+CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
+CommandsCollectorMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
     }], function () { return [{ type: EngineMagicService }]; }, null); })();
 class RouteCommand {
@@ -388,13 +404,30 @@ class RouterCommandsMagicService {
     }
 }
 RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-RouterCommandsMagicService.ɵprov = ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
-(function () { ɵsetClassMetadata(RouterCommandsMagicService, [{
-        type: Injectable
+RouterCommandsMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RouterCommandsMagicService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+class MagicLazyLoaderService {
+    Load(path) {
+        return Promise.reject('error in loading module :' + path);
+    }
+}
+MagicLazyLoaderService.ɵfac = function MagicLazyLoaderService_Factory(t) { return new (t || MagicLazyLoaderService)(); };
+MagicLazyLoaderService.ɵprov = i0.ɵɵdefineInjectable({ token: MagicLazyLoaderService, factory: MagicLazyLoaderService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicLazyLoaderService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
     }], null, null); })();
 class SubformMagicService {
-    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector) {
+    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector, compiler) {
         this.task = task;
         this.activatedRoute = activatedRoute;
         this.componentList = componentList;
@@ -404,6 +437,7 @@ class SubformMagicService {
         this.componentListMagicService = componentListMagicService;
         this.loader = loader;
         this.injector = injector;
+        this.compiler = compiler;
         this.subformsDict = {};
         this.routesDict = {};
         this.currentRouteDefinition = null;
@@ -445,10 +479,11 @@ class SubformMagicService {
             if (moduleRef == null) {
                 let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(formName);
                 if (lazyLoadModule != null) {
-                    this.loader
-                        .load(lazyLoadModule.modulePath + "#" + lazyLoadModule.moduleName)
-                        .then((moduleFactory) => {
-                        moduleRef = moduleFactory.create(this.injector);
+                    let moduleName = lazyLoadModule.moduleName.replace("Magic", "");
+                    moduleName = moduleName.replace("Module", "");
+                    this.loader.Load(moduleName).then(m => {
+                        const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
+                        moduleRef = compiled.ngModuleFactory.create(this.injector);
                         this.subformsDict[subformControlName] = {
                             formName,
                             parameters: { taskIdParam: taskId, taskDescription: taskDescription }
@@ -555,11 +590,11 @@ class SubformMagicService {
 }
 SubformMagicService.currentCallerMgSubformServiceRef = null;
 SubformMagicService.routerContainers = new Array();
-SubformMagicService.ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(ɵɵinject(TaskMagicService), ɵɵinject(ActivatedRoute), ɵɵinject(ComponentListMagicService), ɵɵinject(CommandsCollectorMagicService), ɵɵinject(Router), ɵɵinject(RouterCommandsMagicService), ɵɵinject(ComponentListMagicService), ɵɵinject(NgModuleFactoryLoader), ɵɵinject(Injector)); };
-SubformMagicService.ɵprov = ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
-(function () { ɵsetClassMetadata(SubformMagicService, [{
+SubformMagicService.ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler)); };
+SubformMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicService, [{
         type: Injectable
-    }], function () { return [{ type: TaskMagicService }, { type: ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: NgModuleFactoryLoader }, { type: Injector }]; }, null); })();
+    }], 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 {
     constructor(activatedRoute, router, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
@@ -641,16 +676,16 @@ class RouterContainerMagicComponent {
     }
 }
 RouterContainerMagicComponent.lastRoute = "/";
-RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(ɵɵdirectiveInject(ActivatedRoute), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(EngineMagicService), ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(CommandsCollectorMagicService), ɵɵdirectiveInject(RouterCommandsMagicService)); };
-RouterContainerMagicComponent.ɵcmp = ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
-(function () { ɵsetClassMetadata(RouterContainerMagicComponent, [{
+RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
+RouterContainerMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RouterContainerMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-route-outlet',
                 template: `
   `
             }]
-    }], function () { return [{ type: ActivatedRoute }, { type: Router }, { type: EngineMagicService }, { type: TaskMagicService }, { type: ComponentFactoryResolver }, { type: ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null); })();
+    }], function () { return [{ type: i2.ActivatedRoute }, { type: i2.Router }, { type: EngineMagicService }, { type: TaskMagicService }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null); })();
 class GuiInteractiveExecutor {
     Run() {
@@ -770,41 +805,41 @@ class MagicViewContainerRef {
     constructor(vcRef, resolver) {
         this.vcRef = vcRef;
         this.resolver = resolver;
-        let comp = (this.vcRef._hostView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
+        let comp = (this.vcRef._hostLView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
         comp.setViewContainerRef(vcRef);
     }
 }
-MagicViewContainerRef.ɵfac = function MagicViewContainerRef_Factory(t) { return new (t || MagicViewContainerRef)(ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(ComponentFactoryResolver)); };
-MagicViewContainerRef.ɵdir = ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]] });
-(function () { ɵsetClassMetadata(MagicViewContainerRef, [{
+MagicViewContainerRef.ɵfac = function MagicViewContainerRef_Factory(t) { return new (t || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
+MagicViewContainerRef.ɵdir = i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicViewContainerRef, [{
         type: Directive,
         args: [{
                 selector: '[magicViewContainerRef]',
             }]
-    }], function () { return [{ type: ViewContainerRef }, { type: ComponentFactoryResolver }]; }, null); })();
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, null); })();
-const _c0 = ["modalheader"];
-const _c1 = ["modalForeground"];
+const _c0$3 = ["modalheader"];
+const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "button", 8);
-    ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { ɵɵrestoreView(_r5); const ctx_r4 = ɵɵnextContext(); return ctx_r4.OnClose(); });
-    ɵɵtext(1, "X");
-    ɵɵelementEnd();
+    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.ɵɵtext(1, "X");
+    i0.ɵɵelementEnd();
 } }
 function MagicOverlayContainer_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "div", 9, 10);
-    ɵɵtext(2);
-    ɵɵelementStart(3, "button", 11);
-    ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { ɵɵrestoreView(_r8); const ctx_r7 = ɵɵnextContext(); return ctx_r7.OnClose(); });
-    ɵɵtext(4, "X");
-    ɵɵelementEnd();
-    ɵɵelementEnd();
+    const _r8 = i0.ɵɵgetCurrentView();
+    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.ɵɵtext(4, "X");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = ɵɵnextContext();
-    ɵɵadvance(2);
-    ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
 } }
 class MagicOverlayContainer extends BaseMagicOverlayContainer {
     constructor(injector, componentFactoryResolver) {
@@ -878,42 +913,40 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             this.OnClose();
     }
 }
-MagicOverlayContainer.ɵfac = function MagicOverlayContainer_Factory(t) { return new (t || MagicOverlayContainer)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ComponentFactoryResolver)); };
-MagicOverlayContainer.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0, true);
-        ɵɵviewQuery(_c1, true);
+MagicOverlayContainer.ɵfac = function MagicOverlayContainer_Factory(t) { return new (t || MagicOverlayContainer)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
+MagicOverlayContainer.ɵcmp = 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);
     } if (rf & 2) {
-        var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
-    } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, features: [ɵɵInheritDefinitionFeature], decls: 9, vars: 4, consts: [[1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], [1, "modal-foreground", 3, "ngStyle"], ["modalForeground", ""], ["class", "modal-header", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["modalbody", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "modal-header"], ["modalheader", ""], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelementStart(1, "div", 0);
-        ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { return ctx.OnBackgroundClick(); });
-        ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 1);
-        ɵɵelementEnd();
-        ɵɵelementStart(3, "div", 2, 3);
-        ɵɵtemplate(5, MagicOverlayContainer_div_5_Template, 5, 1, "div", 4);
-        ɵɵelementStart(6, "div", 5);
-        ɵɵelement(7, "div", 6, 7);
-        ɵɵelementEnd();
-        ɵɵelementEnd();
-        ɵɵelementEnd();
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
+    } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 4, consts: [[1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], [1, "modal-foreground", 3, "ngStyle"], ["modalForeground", ""], ["class", "modal-header", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["modalbody", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "modal-header"], ["modalheader", ""], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "div", 0);
+        i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { return ctx.OnBackgroundClick(); });
+        i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 1);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "div", 2, 3);
+        i0.ɵɵtemplate(5, MagicOverlayContainer_div_5_Template, 5, 1, "div", 4);
+        i0.ɵɵelementStart(6, "div", 5);
+        i0.ɵɵelement(7, "div", 6, 7);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵadvance(2);
-        ɵɵproperty("ngIf", !ctx.getShowTitleBar());
-        ɵɵadvance(1);
-        ɵɵproperty("ngStyle", ctx.getStyle());
-        ɵɵadvance(2);
-        ɵɵproperty("ngIf", ctx.getShowTitleBar());
-        ɵɵadvance(1);
-        ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-    } }, directives: [NgIf, NgStyle, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{background-color:#fff}.modal-background[_ngcontent-%COMP%], .modal-foreground[_ngcontent-%COMP%]{bottom:0;left:0;position:fixed;right:0;top:0}.modal-background[_ngcontent-%COMP%]{background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}"] });
-(function () { ɵsetClassMetadata(MagicOverlayContainer, [{
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", !ctx.getShowTitleBar());
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngStyle", ctx.getStyle());
+        i0.ɵɵadvance(2);
+        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;top:0;right:0;bottom:0;left:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;top:0;right:0;bottom:0;left: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: `
+        args: [{ selector: 'app-magic-overlay-container', template: `
     <div>
       <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>
@@ -929,10 +962,8 @@ MagicOverlayContainer.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayContainer,
         </div>
       </div>
     </div>
-  `,
-                styleUrls: ['./magic-overlay-container.css']
-            }]
-    }], function () { return [{ type: Injector }, { type: ComponentFactoryResolver }]; }, { headerElementRef: [{
+  `, styles: [".modal-foreground{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#fff}.modal-background{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}\n"] }]
+    }], function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
         }], foregroundElementRef: [{
@@ -952,8 +983,8 @@ class OverlayContainerMagicProvider {
     }
 }
 OverlayContainerMagicProvider.ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
-OverlayContainerMagicProvider.ɵprov = ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
-(function () { ɵsetClassMetadata(OverlayContainerMagicProvider, [{
+OverlayContainerMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayContainerMagicProvider, [{
         type: Injectable
     }], null, null); })();
@@ -966,8 +997,8 @@ class BaseMagicConfirmComponent {
     }
 }
 BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-BaseMagicConfirmComponent.ɵcmp = ɵɵ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: [""] });
-(function () { ɵsetClassMetadata(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: [""] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -991,8 +1022,8 @@ class BaseMagicAlertComponent {
     }
 }
 BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-BaseMagicAlertComponent.ɵcmp = ɵɵ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: [""] });
-(function () { ɵsetClassMetadata(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: [""] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -1015,23 +1046,24 @@ class MagicFocusDirective {
         this.hostElement.nativeElement.focus();
     }
 }
-MagicFocusDirective.ɵfac = function MagicFocusDirective_Factory(t) { return new (t || MagicFocusDirective)(ɵɵdirectiveInject(ElementRef)); };
-MagicFocusDirective.ɵdir = ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]] });
-(function () { ɵsetClassMetadata(MagicFocusDirective, [{
+MagicFocusDirective.ɵfac = function MagicFocusDirective_Factory(t) { return new (t || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+MagicFocusDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicFocusDirective, [{
         type: Directive,
         args: [{
                 selector: '[magicFocus]'
             }]
-    }], function () { return [{ type: ElementRef }]; }, null); })();
+    }], function () { return [{ type: i0.ElementRef }]; }, null); })();
-const _c0$1 = ["overlayContainerWrapper"];
+const _c0$2 = ["overlayContainerWrapper"];
 class MagicOverlayContainerWrapper {
-    constructor(componentListMagicService, loader, injector, componentFactoryResolver, changeDetectorRef) {
+    constructor(componentListMagicService, magicLazyModuleLoader, injector, componentFactoryResolver, changeDetectorRef, compiler) {
         this.componentListMagicService = componentListMagicService;
-        this.loader = loader;
+        this.magicLazyModuleLoader = magicLazyModuleLoader;
         this.injector = injector;
         this.componentFactoryResolver = componentFactoryResolver;
         this.changeDetectorRef = changeDetectorRef;
+        this.compiler = compiler;
         this.Component = null;
         this.Parameters = {};
         this.onClose = new EventEmitter();
@@ -1041,10 +1073,11 @@ class MagicOverlayContainerWrapper {
         if (moduleRef == null) {
             let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(this.Parameters.MagicFormName);
             if (lazyLoadModule != null) {
-                this.loader
-                    .load(lazyLoadModule.modulePath + "#" + lazyLoadModule.moduleName)
-                    .then((moduleFactory) => {
-                    moduleRef = moduleFactory.create(this.injector);
+                let moduleName = lazyLoadModule.moduleName.replace("Magic", "");
+                moduleName = moduleName.replace("Module", "");
+                this.magicLazyModuleLoader.Load(moduleName).then(m => {
+                    const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
+                    moduleRef = compiled.ngModuleFactory.create(this.injector);
                     this.loadComponent(moduleRef);
                 });
             }
@@ -1090,22 +1123,22 @@ MagicOverlayContainerWrapper.allowedBaseComps = new Map([
     [OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
     [OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
 ]);
-MagicOverlayContainerWrapper.ɵfac = function MagicOverlayContainerWrapper_Factory(t) { return new (t || MagicOverlayContainerWrapper)(ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(NgModuleFactoryLoader), ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(ChangeDetectorRef)); };
-MagicOverlayContainerWrapper.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
-        ɵɵstaticViewQuery(_c0$1, true);
+MagicOverlayContainerWrapper.ɵfac = function MagicOverlayContainerWrapper_Factory(t) { return new (t || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Compiler)); };
+MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$2, 7);
     } if (rf & 2) {
-        var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.overlayContainerWrapperElementRef = _t.first);
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayContainerWrapperElementRef = _t.first);
     } }, inputs: { Component: "Component", Parameters: "Parameters", OverlayTypeParam: "OverlayTypeParam" }, outputs: { onClose: "onClose" }, decls: 7, vars: 0, consts: [["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["overlayContainerWrapper", ""], ["magicViewContainerRef", ""], ["overlayContent", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelement(1, "div", 0);
-        ɵɵelementStart(2, "div", 1, 2);
-        ɵɵelement(4, "div", 3, 4);
-        ɵɵelementEnd();
-        ɵɵelement(6, "div", 5);
-        ɵɵelementEnd();
-    } }, directives: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%] {\n      \n      position: fixed;\n      top: 0;\n      z-index: 999;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }"] });
-(function () { ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelement(1, "div", 0);
+        i0.ɵɵelementStart(2, "div", 1, 2);
+        i0.ɵɵelement(4, "div", 3, 4);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(6, "div", 5);
+        i0.ɵɵelementEnd();
+    } }, directives: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;top:0;z-index:999;right:0;bottom:0;left:0}"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
         type: Component,
         args: [{
                 selector: 'app-magic-overlay-container-wrapper',
@@ -1131,7 +1164,7 @@ MagicOverlayContainerWrapper.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayCon
     }
   `]
             }]
-    }], function () { return [{ type: ComponentListMagicService }, { type: NgModuleFactoryLoader }, { type: Injector }, { type: ComponentFactoryResolver }, { type: ChangeDetectorRef }]; }, { Component: [{
+    }], function () { return [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Compiler }]; }, { Component: [{
             type: Input
         }], Parameters: [{
             type: Input
@@ -1146,30 +1179,29 @@ MagicOverlayContainerWrapper.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayCon
 class MagicAlertComponent extends BaseMagicAlertComponent {
 }
-MagicAlertComponent.ɵfac = function MagicAlertComponent_Factory(t) { return ɵMagicAlertComponent_BaseFactory(t || MagicAlertComponent); };
-MagicAlertComponent.ɵcmp = ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], features: [ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelementStart(1, "div", 0);
-        ɵɵelementStart(2, "h2");
-        ɵɵtext(3);
-        ɵɵelementEnd();
-        ɵɵelementStart(4, "p");
-        ɵɵtext(5);
-        ɵɵelementEnd();
-        ɵɵelementStart(6, "button", 1);
-        ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
-        ɵɵtext(7, "OK");
-        ɵɵelementEnd();
-        ɵɵelementEnd();
-        ɵɵelementEnd();
+MagicAlertComponent.ɵfac = function () { let ɵMagicAlertComponent_BaseFactory; return function MagicAlertComponent_Factory(t) { return (ɵMagicAlertComponent_BaseFactory || (ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent)))(t || MagicAlertComponent); }; }();
+MagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "div", 0);
+        i0.ɵɵelementStart(2, "h2");
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "p");
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "button", 1);
+        i0.ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
+        i0.ɵɵtext(7, "OK");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵadvance(3);
-        ɵɵtextInterpolate1(" ", ctx.title, "");
-        ɵɵadvance(2);
-        ɵɵtextInterpolate1("", ctx.message, " ");
-    } }, styles: [".mg-message-background[_ngcontent-%COMP%] {\n  background-color: #F5F5F5;\n  text-align: center;\n  width: 40%;\n  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 17px;\n  border-radius: 5px;\n  text-align: center;\n  margin-top: 10% ;\n  margin-left: auto;\n  margin-right: auto;\n  border: 1px solid  gray;\n  }\n\n  button[_ngcontent-%COMP%] {\n  background-color: #8CD4F5;\n  color: white;\n  border: none;\n  box-shadow: none;\n  font-size: 17px;\n  font-weight: 500;\n  -webkit-border-radius: 4px;\n  border-radius: 5px;\n  padding: 10px 32px;\n  margin: 26px 5px 0 5px;\n  cursor: pointer;\n  }"] });
-const ɵMagicAlertComponent_BaseFactory = ɵɵgetInheritedFactory(MagicAlertComponent);
-(function () { ɵsetClassMetadata(MagicAlertComponent, [{
+        i0.ɵɵadvance(3);
+        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;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',
@@ -1215,34 +1247,33 @@ const ɵMagicAlertComponent_BaseFactory = ɵɵgetInheritedFactory(MagicAlertComp
 class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
 }
-MagicConfirmationBoxComponent.ɵfac = function MagicConfirmationBoxComponent_Factory(t) { return ɵMagicConfirmationBoxComponent_BaseFactory(t || MagicConfirmationBoxComponent); };
-MagicConfirmationBoxComponent.ɵcmp = ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], features: [ɵɵInheritDefinitionFeature], decls: 11, vars: 2, consts: [[1, "mg-message-background"], [3, "click"], [1, "cancel", 3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelementStart(1, "div", 0);
-        ɵɵelementStart(2, "h2");
-        ɵɵtext(3);
-        ɵɵelementEnd();
-        ɵɵtext(4);
-        ɵɵelement(5, "br");
-        ɵɵelement(6, "br");
-        ɵɵelementStart(7, "button", 1);
-        ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_7_listener() { return ctx.OnClose(true); });
-        ɵɵtext(8, "OK");
-        ɵɵelementEnd();
-        ɵɵelementStart(9, "button", 2);
-        ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_9_listener() { return ctx.OnClose(false); });
-        ɵɵtext(10, "Cancel");
-        ɵɵelementEnd();
-        ɵɵelementEnd();
-        ɵɵelementEnd();
+MagicConfirmationBoxComponent.ɵfac = function () { let ɵMagicConfirmationBoxComponent_BaseFactory; return function MagicConfirmationBoxComponent_Factory(t) { return (ɵMagicConfirmationBoxComponent_BaseFactory || (ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent)))(t || MagicConfirmationBoxComponent); }; }();
+MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 2, consts: [[1, "mg-message-background"], [3, "click"], [1, "cancel", 3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "div", 0);
+        i0.ɵɵelementStart(2, "h2");
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtext(4);
+        i0.ɵɵelement(5, "br");
+        i0.ɵɵelement(6, "br");
+        i0.ɵɵelementStart(7, "button", 1);
+        i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_7_listener() { return ctx.OnClose(true); });
+        i0.ɵɵtext(8, "OK");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "button", 2);
+        i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_9_listener() { return ctx.OnClose(false); });
+        i0.ɵɵtext(10, "Cancel");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵadvance(3);
-        ɵɵtextInterpolate1(" ", ctx.title, "");
-        ɵɵadvance(1);
-        ɵɵtextInterpolate1(" ", ctx.message, " ");
-    } }, styles: [".mg-message-background[_ngcontent-%COMP%] {\n  background-color: #F5F5F5;\n  text-align: center;\n  width: 40%;\n  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 17px;\n  border-radius: 5px;\n  text-align: center;\n  margin-top: 10% ;\n  margin-left: auto;\n  margin-right: auto;\n  border: 1px solid  gray;\n  }\n\n  button[_ngcontent-%COMP%] {\n  background-color: #8CD4F5;\n  color: white;\n  border: none;\n  box-shadow: none;\n  font-size: 17px;\n  font-weight: 500;\n  -webkit-border-radius: 4px;\n  border-radius: 5px;\n  padding: 10px 32px;\n  margin: 26px 5px 0 5px;\n  cursor: pointer;\n  }\n    \n    button.cancel[_ngcontent-%COMP%] {\n      background-color: #C1C1C1;\n    }"] });
-const ɵMagicConfirmationBoxComponent_BaseFactory = ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
-(function () { ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+        i0.ɵɵadvance(1);
+        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;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',
@@ -1305,8 +1336,8 @@ class ConfirmationComponentsMagicProvider {
     }
 }
 ConfirmationComponentsMagicProvider.ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
-ConfirmationComponentsMagicProvider.ɵprov = ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
-(function () { ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
+ConfirmationComponentsMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
         type: Injectable
     }], null, null); })();
@@ -1419,11 +1450,14 @@ class OverlayWindowService {
         return componentRef;
     }
 }
-OverlayWindowService.ɵfac = function OverlayWindowService_Factory(t) { return new (t || OverlayWindowService)(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ComponentListMagicService), ɵɵinject(EngineMagicService), ɵɵinject(OverlayContainerMagicProvider), ɵɵinject(ConfirmationComponentsMagicProvider)); };
-OverlayWindowService.ɵprov = ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac });
-(function () { ɵsetClassMetadata(OverlayWindowService, [{
-        type: Injectable
-    }], function () { return [{ type: ComponentFactoryResolver }, { type: ComponentListMagicService }, { type: EngineMagicService }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }]; }, null); })();
+OverlayWindowService.ɵfac = function OverlayWindowService_Factory(t) { return new (t || OverlayWindowService)(i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
+OverlayWindowService.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayWindowService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: ComponentListMagicService }, { type: EngineMagicService }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }]; }, null); })();
 class OverlayWindowFocusManager {
     constructor(rootMagicElement) {
         this.rootMagicElement = null;
@@ -2130,9 +2164,9 @@ class TaskMagicService {
         }
     }
 }
-TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(ɵɵinject(EngineMagicService), ɵɵinject(OverlayWindowService)); };
-TaskMagicService.ɵprov = ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
-(function () { ɵsetClassMetadata(TaskMagicService, [{
+TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
+TaskMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskMagicService, [{
         type: Injectable
     }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
@@ -2198,9 +2232,9 @@ class TableMagicService {
         return topIndex;
     }
 }
-TableMagicService.ɵfac = function TableMagicService_Factory(t) { return new (t || TableMagicService)(ɵɵinject(ComponentListMagicService), ɵɵinject(TaskMagicService)); };
-TableMagicService.ɵprov = ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
-(function () { ɵsetClassMetadata(TableMagicService, [{
+TableMagicService.ɵfac = function TableMagicService_Factory(t) { return new (t || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
+TableMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableMagicService, [{
         type: Injectable
     }], function () { return [{ type: ComponentListMagicService }, { type: TaskMagicService }]; }, null); })();
@@ -2212,11 +2246,11 @@ class TitleMagicService {
         this.titleService.setTitle(newTitle);
     }
 }
-TitleMagicService.ɵfac = function TitleMagicService_Factory(t) { return new (t || TitleMagicService)(ɵɵinject(Title)); };
-TitleMagicService.ɵprov = ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
-(function () { ɵsetClassMetadata(TitleMagicService, [{
+TitleMagicService.ɵfac = function TitleMagicService_Factory(t) { return new (t || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
+TitleMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TitleMagicService, [{
         type: Injectable
-    }], function () { return [{ type: Title }]; }, null); })();
+    }], function () { return [{ type: i1$1.Title }]; }, null); })();
 class AccessorMagicService {
     constructor(task) {
@@ -2506,9 +2540,9 @@ class AccessorMagicService {
         return CookieService.deleteCookie(name);
     }
 }
-AccessorMagicService.ɵfac = function AccessorMagicService_Factory(t) { return new (t || AccessorMagicService)(ɵɵinject(TaskMagicService)); };
-AccessorMagicService.ɵprov = ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
-(function () { ɵsetClassMetadata(AccessorMagicService, [{
+AccessorMagicService.ɵfac = function AccessorMagicService_Factory(t) { return new (t || AccessorMagicService)(i0.ɵɵinject(TaskMagicService)); };
+AccessorMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessorMagicService, [{
         type: Injectable
     }], function () { return [{ type: TaskMagicService }]; }, null); })();
@@ -2525,9 +2559,9 @@ class MagicServices {
         task.mgAccessorService = mgAccessorService;
     }
 }
-MagicServices.ɵfac = function MagicServices_Factory(t) { return new (t || MagicServices)(ɵɵinject(TaskMagicService), ɵɵinject(SubformMagicService), ɵɵinject(TableMagicService), ɵɵinject(TitleMagicService), ɵɵinject(AccessorMagicService)); };
-MagicServices.ɵprov = ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
-(function () { ɵsetClassMetadata(MagicServices, [{
+MagicServices.ɵfac = function MagicServices_Factory(t) { return new (t || MagicServices)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(SubformMagicService), i0.ɵɵinject(TableMagicService), i0.ɵɵinject(TitleMagicService), i0.ɵɵinject(AccessorMagicService)); };
+MagicServices.ɵprov = i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicServices, [{
         type: Injectable
     }], function () { return [{ type: TaskMagicService }, { type: SubformMagicService }, { type: TableMagicService }, { type: TitleMagicService }, { type: AccessorMagicService }]; }, null); })();
@@ -2588,16 +2622,16 @@ class TaskBaseMagicComponent {
         this.task.dispose();
     }
 }
-TaskBaseMagicComponent.ɵfac = function TaskBaseMagicComponent_Factory(t) { return new (t || TaskBaseMagicComponent)(ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(MagicServices)); };
-TaskBaseMagicComponent.ɵcmp = ɵɵdefineComponent({ type: TaskBaseMagicComponent, selectors: [["task-magic"]], inputs: { taskIdParam: "taskIdParam", taskDescription: "taskDescription" }, features: [ɵɵProvidersFeature([TaskMagicService, SubformMagicService, TableMagicService])], decls: 0, vars: 0, template: function TaskBaseMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
-(function () { ɵsetClassMetadata(TaskBaseMagicComponent, [{
+TaskBaseMagicComponent.ɵfac = function TaskBaseMagicComponent_Factory(t) { return new (t || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
+TaskBaseMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TaskBaseMagicComponent, selectors: [["task-magic"]], inputs: { taskIdParam: "taskIdParam", taskDescription: "taskDescription" }, features: [i0.ɵɵProvidersFeature([TaskMagicService, SubformMagicService, TableMagicService])], decls: 0, vars: 0, template: function TaskBaseMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskBaseMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'task-magic',
                 providers: [TaskMagicService, SubformMagicService, TableMagicService],
                 template: ''
             }]
-    }], function () { return [{ type: ChangeDetectorRef }, { type: MagicServices }]; }, { taskIdParam: [{
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: MagicServices }]; }, { taskIdParam: [{
             type: Input
         }], taskDescription: [{
             type: Input
@@ -2637,16 +2671,16 @@ class RowMagicDirective {
         }
     }
 }
-RowMagicDirective.ɵfac = function RowMagicDirective_Factory(t) { return new (t || RowMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef)); };
-RowMagicDirective.ɵdir = ɵɵdefineDirective({ type: RowMagicDirective, selectors: [["", "magicRow", ""]], hostBindings: function RowMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("click", function RowMagicDirective_click_HostBindingHandler($event) { return ctx.onClick($event); });
+RowMagicDirective.ɵfac = function RowMagicDirective_Factory(t) { return new (t || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+RowMagicDirective.ɵdir = 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: ["magicRow", "rowId"] } });
-(function () { ɵsetClassMetadata(RowMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RowMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[magicRow]'
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: ElementRef }]; }, { rowId: [{
+    }], function () { return [{ type: TaskMagicService }, { type: i0.ElementRef }]; }, { rowId: [{
             type: Input,
             args: ['magicRow']
         }], onClick: [{
@@ -2797,7 +2831,7 @@ class MagicDirective {
             case InteractiveCommandType.CALL_JS:
                 let methodName = command._str;
                 let args = command.arguments;
-                let magicComponent = (this.vcRef._hostView).find(v => v instanceof TaskBaseMagicComponent);
+                let magicComponent = (this.vcRef._hostLView).find(v => v instanceof TaskBaseMagicComponent);
                 let resultString = '';
                 try {
                     if (!isNullOrUndefined(magicComponent[methodName])) {
@@ -2829,14 +2863,14 @@ class MagicDirective {
 }
 MagicDirective.opened = false;
 MagicDirective.noOfAutoCompleteBoxesOpened = 0;
-MagicDirective.ɵfac = function MagicDirective_Factory(t) { return new (t || MagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(RowMagicDirective, 8)); };
-MagicDirective.ɵdir = ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", rowId: "rowId" } });
-(function () { ɵsetClassMetadata(MagicDirective, [{
+MagicDirective.ɵfac = function MagicDirective_Factory(t) { return new (t || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", rowId: "rowId" } });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[magic]'
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: ElementRef }, { type: Renderer2 }, { type: ViewContainerRef }, { type: RowMagicDirective, decorators: [{
+    }], function () { return [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }]; }, { magic: [{
             type: Input,
@@ -3015,14 +3049,14 @@ class NoControlMagicDirective extends MagicDirective {
         }
     }
 }
-NoControlMagicDirective.ɵfac = function NoControlMagicDirective_Factory(t) { return new (t || NoControlMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(RowMagicDirective, 8)); };
-NoControlMagicDirective.ɵdir = ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: ["magicnc", "magic"] }, features: [ɵɵInheritDefinitionFeature] });
-(function () { ɵsetClassMetadata(NoControlMagicDirective, [{
+NoControlMagicDirective.ɵfac = function NoControlMagicDirective_Factory(t) { return new (t || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+NoControlMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: ["magicnc", "magic"] }, features: [i0.ɵɵInheritDefinitionFeature] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NoControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[magicnc]'
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: ElementRef }, { type: Renderer2 }, { type: ViewContainerRef }, { type: RowMagicDirective, decorators: [{
+    }], function () { return [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }]; }, { magic: [{
             type: Input,
@@ -3056,9 +3090,9 @@ class DateMagicPipe extends DatePipe {
         return value;
     }
 }
-DateMagicPipe.ɵfac = function DateMagicPipe_Factory(t) { return new (t || DateMagicPipe)(ɵɵdirectiveInject(TaskMagicService)); };
-DateMagicPipe.ɵpipe = ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
-(function () { ɵsetClassMetadata(DateMagicPipe, [{
+DateMagicPipe.ɵfac = function DateMagicPipe_Factory(t) { return new (t || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+DateMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateMagicPipe, [{
         type: Pipe,
         args: [{
                 name: 'magicDate'
@@ -3326,11 +3360,11 @@ class MgformatMagicDirective {
         return false;
     }
 }
-MgformatMagicDirective.ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(ɵɵdirectiveInject(MagicDirective), ɵɵdirectiveInject(TaskMagicService)); };
-MgformatMagicDirective.ɵdir = ɵɵdefineDirective({ type: MgformatMagicDirective, selectors: [["", "mgFormat", ""]], hostBindings: function MgformatMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("focus", function MgformatMagicDirective_focus_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); });
+MgformatMagicDirective.ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+MgformatMagicDirective.ɵdir = 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); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); });
     } } });
-(function () { ɵsetClassMetadata(MgformatMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgformatMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[mgFormat]'
@@ -3378,9 +3412,9 @@ class TimeMagicPipe extends DatePipe {
         return value;
     }
 }
-TimeMagicPipe.ɵfac = function TimeMagicPipe_Factory(t) { return new (t || TimeMagicPipe)(ɵɵdirectiveInject(TaskMagicService)); };
-TimeMagicPipe.ɵpipe = ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
-(function () { ɵsetClassMetadata(TimeMagicPipe, [{
+TimeMagicPipe.ɵfac = function TimeMagicPipe_Factory(t) { return new (t || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+TimeMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeMagicPipe, [{
         type: Pipe,
         args: [{
                 name: 'magicTime'
@@ -3418,15 +3452,15 @@ class RangeValidatorMagicDirective {
         return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
     }
 }
-RangeValidatorMagicDirective.ɵfac = function RangeValidatorMagicDirective_Factory(t) { return new (t || RangeValidatorMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ViewContainerRef)); };
-RangeValidatorMagicDirective.ɵdir = ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], features: [ɵɵProvidersFeature([
+RangeValidatorMagicDirective.ɵfac = function RangeValidatorMagicDirective_Factory(t) { return new (t || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+RangeValidatorMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], features: [i0.ɵɵProvidersFeature([
             {
                 provide: NG_VALIDATORS,
                 useExisting: RangeValidatorMagicDirective,
                 multi: true,
             }
         ])] });
-(function () { ɵsetClassMetadata(RangeValidatorMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RangeValidatorMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[rangevalidator] ',
@@ -3438,20 +3472,20 @@ RangeValidatorMagicDirective.ɵdir = ɵɵdefineDirective({ type: RangeValidatorM
                     }
                 ]
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: ViewContainerRef }]; }, null); })();
+    }], function () { return [{ type: TaskMagicService }, { type: i0.ViewContainerRef }]; }, null); })();
 function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "ndc-dynamic", 1);
+    i0.ɵɵelement(0, "ndc-dynamic", 1);
 } if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
 } }
 class SubformMagicComponent {
     constructor(vcRef, mgSub) {
         this.vcRef = vcRef;
         this.mgSub = mgSub;
         this.component = null;
-        this.component = (this.vcRef._hostView).find(v => !isNullOrUndefined(v));
+        this.component = (this.vcRef._hostLView).find(v => !isNullOrUndefined(v));
     }
     set magic(val) { this.id = val; }
     ;
@@ -3462,13 +3496,13 @@ class SubformMagicComponent {
         return this.mgSub.mgGetParameters(this.id);
     }
 }
-SubformMagicComponent.ɵfac = function SubformMagicComponent_Factory(t) { return new (t || SubformMagicComponent)(ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(SubformMagicService)); };
-SubformMagicComponent.ɵcmp = ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵtemplate(0, SubformMagicComponent_ndc_dynamic_0_Template, 1, 2, "ndc-dynamic", 0);
+SubformMagicComponent.ɵfac = function SubformMagicComponent_Factory(t) { return new (t || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
+SubformMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, 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);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.Component);
-    } }, directives: [NgIf, DynamicComponent, DynamicIoDirective], encapsulation: 2 });
-(function () { ɵsetClassMetadata(SubformMagicComponent, [{
+        i0.ɵɵproperty("ngIf", ctx.Component);
+    } }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-subform',
@@ -3480,34 +3514,34 @@ SubformMagicComponent.ɵcmp = ɵɵdefineComponent({ type: SubformMagicComponent,
     </ndc-dynamic>
 `
             }]
-    }], function () { return [{ type: ViewContainerRef }, { type: SubformMagicService }]; }, { magic: [{
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: SubformMagicService }]; }, { magic: [{
             type: Input,
             args: ['magic']
         }] }); })();
-const _c0$2 = ["customContent"];
+const _c0$1 = ["customContent"];
 function ErrorMagicComponent_div_0_span_4_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "span");
-    ɵɵtext(1);
-    ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = ɵɵnextContext(2);
-    ɵɵadvance(1);
-    ɵɵtextInterpolate1(" ", ctx_r2.mgService.getErrMsg(ctx_r2.id, ctx_r2.rowId), " ");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.mgService.getErrMsg(ctx_r2.id, ctx_r2.rowId), " ");
 } }
 function ErrorMagicComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div");
-    ɵɵelementStart(1, "div", null, 1);
-    ɵɵprojection(3);
-    ɵɵelementEnd();
-    ɵɵtemplate(4, ErrorMagicComponent_div_0_span_4_Template, 2, 1, "span", 0);
-    ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelementStart(1, "div", null, 1);
+    i0.ɵɵprojection(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, ErrorMagicComponent_div_0_span_4_Template, 2, 1, "span", 0);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵadvance(4);
-    ɵɵproperty("ngIf", ctx_r0.defaultDisplay);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r0.defaultDisplay);
 } }
-const _c1$1 = ["*"];
+const _c1 = ["*"];
 class ErrorMagicComponent {
     constructor(_task, mgService, changeDetectorRef) {
         this._task = _task;
@@ -3560,19 +3594,19 @@ class ErrorMagicComponent {
         return false;
     }
 }
-ErrorMagicComponent.ɵfac = function ErrorMagicComponent_Factory(t) { return new (t || ErrorMagicComponent)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(AccessorMagicService), ɵɵdirectiveInject(ChangeDetectorRef)); };
-ErrorMagicComponent.ɵcmp = ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$2, true);
+ErrorMagicComponent.ɵfac = function ErrorMagicComponent_Factory(t) { return new (t || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+ErrorMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$1, 5);
     } if (rf & 2) {
-        var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
-    } }, inputs: { magic: "magic", rowId1: ["rowId", "rowId1"] }, ngContentSelectors: _c1$1, decls: 1, vars: 1, consts: [[4, "ngIf"], ["customContent", ""]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵprojectionDef();
-        ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 0);
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
+    } }, inputs: { magic: "magic", rowId1: ["rowId", "rowId1"] }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[4, "ngIf"], ["customContent", ""]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵprojectionDef();
+        i0.ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 0);
     } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
-    } }, directives: [NgIf], encapsulation: 2 });
-(function () { ɵsetClassMetadata(ErrorMagicComponent, [{
+        i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
+    } }, directives: [i1.NgIf], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
@@ -3586,7 +3620,7 @@ ErrorMagicComponent.ɵcmp = ɵɵdefineComponent({ type: ErrorMagicComponent, sel
     </div>
 `
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: AccessorMagicService }, { type: ChangeDetectorRef }]; }, { magic: [{
+    }], function () { return [{ type: TaskMagicService }, { type: AccessorMagicService }, { type: i0.ChangeDetectorRef }]; }, { magic: [{
             type: Input,
             args: ['magic']
         }], rowId1: [{
@@ -3605,11 +3639,11 @@ class CheckboxMagicDirective {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-CheckboxMagicDirective.ɵdir = ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("change", function CheckboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
+CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+CheckboxMagicDirective.ɵdir = 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); });
     } } });
-(function () { ɵsetClassMetadata(CheckboxMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3629,11 +3663,11 @@ class ComboboxMagicDirective {
         this.magicDirective.task.onComboboxSelectionChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-ComboboxMagicDirective.ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-ComboboxMagicDirective.ɵdir = ɵɵdefineDirective({ type: ComboboxMagicDirective, selectors: [["select", "magic", "", 3, "multiple", ""]], hostBindings: function ComboboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("change", function ComboboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
+ComboboxMagicDirective.ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+ComboboxMagicDirective.ɵdir = 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); });
     } } });
-(function () { ɵsetClassMetadata(ComboboxMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComboboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `select[magic]:not([multiple])`,
@@ -3649,30 +3683,30 @@ class ExitMagicService {
     }
 }
 ExitMagicService.ɵfac = function ExitMagicService_Factory(t) { return new (t || ExitMagicService)(); };
-ExitMagicService.ɵprov = ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
-(function () { ɵsetClassMetadata(ExitMagicService, [{
+ExitMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExitMagicService, [{
         type: Injectable
     }], null, null); })();
-const _c0$3 = ["magicRoot"];
+const _c0 = ["magicRoot"];
 function MagicShellComponent_ndc_dynamic_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "ndc-dynamic", 6);
+    i0.ɵɵelement(0, "ndc-dynamic", 6);
 } if (rf & 2) {
-    const ctx_r1 = ɵɵnextContext();
-    ɵɵproperty("ndcDynamicComponent", ctx_r1.RootComponent)("ndcDynamicInputs", ctx_r1.RootComponentParameters);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ndcDynamicComponent", ctx_r1.RootComponent)("ndcDynamicInputs", ctx_r1.RootComponentParameters);
 } }
 function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 7);
-    ɵɵelementContainer(1, 8);
-    ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelementContainer(1, 8);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = ɵɵnextContext();
-    const _r4 = ɵɵreference(7);
-    ɵɵadvance(1);
-    ɵɵproperty("ngTemplateOutlet", ctx_r3.SpinnerTemplate ? ctx_r3.SpinnerTemplate : _r4);
+    const ctx_r3 = i0.ɵɵnextContext();
+    const _r4 = i0.ɵɵreference(7);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.SpinnerTemplate ? ctx_r3.SpinnerTemplate : _r4);
 } }
 function MagicShellComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "div", 9);
+    i0.ɵɵelement(0, "div", 9);
 } }
 class MagicShellComponent {
     constructor(engineMagicService, componentList, changeDetectorRef, titleService, overlayWindowService, httpClient, pendingCommandsCollector, exitMagicService) {
@@ -3777,28 +3811,28 @@ class MagicShellComponent {
         }
     }
 }
-MagicShellComponent.ɵfac = function MagicShellComponent_Factory(t) { return new (t || MagicShellComponent)(ɵɵdirectiveInject(EngineMagicService), ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(Title), ɵɵdirectiveInject(OverlayWindowService), ɵɵdirectiveInject(HttpClient), ɵɵdirectiveInject(CommandsCollectorMagicService), ɵɵdirectiveInject(ExitMagicService, 8)); };
-MagicShellComponent.ɵcmp = ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵstaticViewQuery(_c0$3, true);
+MagicShellComponent.ɵfac = function MagicShellComponent_Factory(t) { return new (t || MagicShellComponent)(i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.Title), i0.ɵɵdirectiveInject(OverlayWindowService), i0.ɵɵdirectiveInject(i5.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
+MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 7);
     } if (rf & 2) {
-        var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
     } }, hostBindings: function MagicShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, false, ɵɵresolveWindow)("unload", function MagicShellComponent_unload_HostBindingHandler($event) { return ctx.onUnload($event); }, false, ɵɵresolveWindow);
-    } }, inputs: { SpinnerTemplate: "SpinnerTemplate" }, features: [ɵɵProvidersFeature([])], decls: 8, vars: 2, consts: [["magicRoot", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["overlayWindowsContainer", ""], ["class", "spinner-background", 4, "ngIf"], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs"], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div", null, 0);
-        ɵɵtemplate(2, MagicShellComponent_ndc_dynamic_2_Template, 1, 2, "ndc-dynamic", 1);
-        ɵɵelement(3, "div", 2, 3);
-        ɵɵelementEnd();
-        ɵɵtemplate(5, MagicShellComponent_div_5_Template, 2, 1, "div", 4);
-        ɵɵtemplate(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 5, ɵɵtemplateRefExtractor);
+        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);
+    } }, inputs: { SpinnerTemplate: "SpinnerTemplate" }, features: [i0.ɵɵProvidersFeature([])], decls: 8, vars: 2, consts: [["magicRoot", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["overlayWindowsContainer", ""], ["class", "spinner-background", 4, "ngIf"], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs"], [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", 1);
+        i0.ɵɵelement(3, "div", 2, 3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(5, MagicShellComponent_div_5_Template, 2, 1, "div", 4);
+        i0.ɵɵtemplate(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
-        ɵɵadvance(2);
-        ɵɵproperty("ngIf", ctx.RootComponent !== null);
-        ɵɵadvance(3);
-        ɵɵproperty("ngIf", ctx.showSpinner);
-    } }, directives: [NgIf, MagicViewContainerRef, DynamicComponent, DynamicIoDirective, NgTemplateOutlet], styles: [".mgSpinnerClass[_ngcontent-%COMP%] {\n      border: 10px solid #cccccc; \n      border-top: 10px solid black; \n      border-radius: 50%;\n      position: fixed;\n      margin: auto;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100px;\n      height: 100px;\n      animation: spin 2s linear infinite;\n    }\n    .spinner-background[_ngcontent-%COMP%] {\n      \n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1000;\n      left: 0;\n      opacity: 0.5;\n    }\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }"] });
-(function () { ɵsetClassMetadata(MagicShellComponent, [{
+        i0.ɵɵadvance(2);
+        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;top:0;right:0;bottom:0;left:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;top:0;right:0;bottom:0;z-index:1000;left:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-root',
@@ -3854,7 +3888,7 @@ MagicShellComponent.ɵcmp = ɵɵdefineComponent({ type: MagicShellComponent, sel
     }
   `]
             }]
-    }], function () { return [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: ChangeDetectorRef }, { type: Title }, { type: OverlayWindowService }, { type: HttpClient }, { type: CommandsCollectorMagicService }, { type: ExitMagicService, decorators: [{
+    }], function () { return [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i5.HttpClient }, { type: CommandsCollectorMagicService }, { type: ExitMagicService, decorators: [{
                 type: Optional
             }] }]; }, { rootMagicElementRef: [{
             type: ViewChild,
@@ -3876,12 +3910,11 @@ const CHECKBOX_VALUE_ACCESSOR = {
 };
 class MagicCheckboxControlValueAccessor extends CheckboxControlValueAccessor {
 }
-MagicCheckboxControlValueAccessor.ɵfac = function MagicCheckboxControlValueAccessor_Factory(t) { return ɵMagicCheckboxControlValueAccessor_BaseFactory(t || MagicCheckboxControlValueAccessor); };
-MagicCheckboxControlValueAccessor.ɵdir = ɵɵdefineDirective({ type: MagicCheckboxControlValueAccessor, selectors: [["input", "type", "checkbox", "magic", "", 3, "formControlName", "", 3, "no-form-control", ""], ["input", "type", "checkbox", "magic", "", 3, "formControl", ""], ["input", "type", "checkbox", "magic", "", 3, "ngModel", ""]], hostBindings: function MagicCheckboxControlValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("change", function MagicCheckboxControlValueAccessor_change_HostBindingHandler($event) { return ctx.onChange($event.target.checked); })("blur", function MagicCheckboxControlValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); });
-    } }, features: [ɵɵProvidersFeature([CHECKBOX_VALUE_ACCESSOR]), ɵɵInheritDefinitionFeature] });
-const ɵMagicCheckboxControlValueAccessor_BaseFactory = ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
-(function () { ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
+MagicCheckboxControlValueAccessor.ɵfac = function () { let ɵMagicCheckboxControlValueAccessor_BaseFactory; return function MagicCheckboxControlValueAccessor_Factory(t) { return (ɵMagicCheckboxControlValueAccessor_BaseFactory || (ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor)))(t || MagicCheckboxControlValueAccessor); }; }();
+MagicCheckboxControlValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: MagicCheckboxControlValueAccessor, selectors: [["input", "type", "checkbox", "magic", "", 3, "formControlName", "", 3, "no-form-control", ""], ["input", "type", "checkbox", "magic", "", 3, "formControl", ""], ["input", "type", "checkbox", "magic", "", 3, "ngModel", ""]], hostBindings: function MagicCheckboxControlValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("change", function MagicCheckboxControlValueAccessor_change_HostBindingHandler($event) { return ctx.onChange($event.target.checked); })("blur", function MagicCheckboxControlValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); });
+    } }, features: [i0.ɵɵProvidersFeature([CHECKBOX_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3901,12 +3934,11 @@ const MAGIC_DEFAULT_VALUE_ACCESSOR = {
 };
 class MagicDefaultValueAccessor extends DefaultValueAccessor {
 }
-MagicDefaultValueAccessor.ɵfac = function MagicDefaultValueAccessor_Factory(t) { return ɵMagicDefaultValueAccessor_BaseFactory(t || MagicDefaultValueAccessor); };
-MagicDefaultValueAccessor.ɵdir = ɵɵdefineDirective({ type: MagicDefaultValueAccessor, selectors: [["input", "magic", "", 3, "type", "checkbox", 3, "formControlName", "", 3, "no-form-control", ""], ["textarea", "magic", "", 3, "formControlName", "", 3, "noFormControl", "", 3, "no-form-control", ""]], hostBindings: function MagicDefaultValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("input", function MagicDefaultValueAccessor_input_HostBindingHandler($event) { return ctx._handleInput($event.target.value); })("blur", function MagicDefaultValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); })("compositionstart", function MagicDefaultValueAccessor_compositionstart_HostBindingHandler() { return ctx._compositionStart(); })("compositionend", function MagicDefaultValueAccessor_compositionend_HostBindingHandler($event) { return ctx._compositionEnd($event.target.value); });
-    } }, exportAs: ["magic"], features: [ɵɵProvidersFeature([MAGIC_DEFAULT_VALUE_ACCESSOR]), ɵɵInheritDefinitionFeature] });
-const ɵMagicDefaultValueAccessor_BaseFactory = ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
-(function () { ɵsetClassMetadata(MagicDefaultValueAccessor, [{
+MagicDefaultValueAccessor.ɵfac = function () { let ɵMagicDefaultValueAccessor_BaseFactory; return function MagicDefaultValueAccessor_Factory(t) { return (ɵMagicDefaultValueAccessor_BaseFactory || (ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor)))(t || MagicDefaultValueAccessor); }; }();
+MagicDefaultValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: MagicDefaultValueAccessor, selectors: [["input", "magic", "", 3, "type", "checkbox", 3, "formControlName", "", 3, "no-form-control", ""], ["textarea", "magic", "", 3, "formControlName", "", 3, "noFormControl", "", 3, "no-form-control", ""]], hostBindings: function MagicDefaultValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("input", function MagicDefaultValueAccessor_input_HostBindingHandler($event) { return ctx._handleInput($event.target.value); })("blur", function MagicDefaultValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); })("compositionstart", function MagicDefaultValueAccessor_compositionstart_HostBindingHandler() { return ctx._compositionStart(); })("compositionend", function MagicDefaultValueAccessor_compositionend_HostBindingHandler($event) { return ctx._compositionEnd($event.target.value); });
+    } }, exportAs: ["magic"], features: [i0.ɵɵProvidersFeature([MAGIC_DEFAULT_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDefaultValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3932,11 +3964,11 @@ class CheckboxNoFormControlMagicDirective {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-CheckboxNoFormControlMagicDirective.ɵfac = function CheckboxNoFormControlMagicDirective_Factory(t) { return new (t || CheckboxNoFormControlMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-CheckboxNoFormControlMagicDirective.ɵdir = ɵɵdefineDirective({ type: CheckboxNoFormControlMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", "noFormControl", ""]], hostBindings: function CheckboxNoFormControlMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("change", function CheckboxNoFormControlMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
+CheckboxNoFormControlMagicDirective.ɵfac = function CheckboxNoFormControlMagicDirective_Factory(t) { return new (t || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+CheckboxNoFormControlMagicDirective.ɵdir = 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); });
     } } });
-(function () { ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3956,11 +3988,11 @@ class InputNoFormControlMagicDirective {
         this.magicDirective.task.setInputTextValue(this.magicDirective.id, this.magicDirective.rowId, event.srcElement.value);
     }
 }
-InputNoFormControlMagicDirective.ɵfac = function InputNoFormControlMagicDirective_Factory(t) { return new (t || InputNoFormControlMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-InputNoFormControlMagicDirective.ɵdir = ɵɵ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) {
-        ɵɵlistener("change", function InputNoFormControlMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
+InputNoFormControlMagicDirective.ɵfac = function InputNoFormControlMagicDirective_Factory(t) { return new (t || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+InputNoFormControlMagicDirective.ɵdir = 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); });
     } } });
-(function () { ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `input[magic]:([noFormControl]):not([type=checkbox]),
@@ -4002,17 +4034,17 @@ class DateValueAccessor {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
 }
-DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ElementRef)); };
-DateValueAccessor.ɵdir = ɵɵdefineDirective({ type: DateValueAccessor, selectors: [["", "dateInput", ""]], hostBindings: function DateValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("input", function DateValueAccessor_input_HostBindingHandler($event) { return ctx.onChange($event.target.valueAsDate); })("blur", function DateValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); });
-    } }, features: [ɵɵProvidersFeature([DATE_VALUE_ACCESSOR])] });
-(function () { ɵsetClassMetadata(DateValueAccessor, [{
+DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+DateValueAccessor.ɵdir = 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() { return ctx.onTouched(); });
+    } }, features: [i0.ɵɵProvidersFeature([DATE_VALUE_ACCESSOR])] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateValueAccessor, [{
         type: Directive,
         args: [{
                 selector: "[dateInput]",
                 providers: [DATE_VALUE_ACCESSOR]
             }]
-    }], function () { return [{ type: Renderer2 }, { type: ElementRef }]; }, { onChange: [{
+    }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { onChange: [{
             type: HostListener,
             args: ["input", ["$event.target.valueAsDate"]]
         }], onTouched: [{
@@ -4052,14 +4084,14 @@ class NonMagicControlDirective {
         this.regEvents();
     }
 }
-NonMagicControlDirective.ɵfac = function NonMagicControlDirective_Factory(t) { return new (t || NonMagicControlDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef)); };
-NonMagicControlDirective.ɵdir = ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: ["NonMagicControl", "magic"] } });
-(function () { ɵsetClassMetadata(NonMagicControlDirective, [{
+NonMagicControlDirective.ɵfac = function NonMagicControlDirective_Factory(t) { return new (t || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+NonMagicControlDirective.ɵdir = i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: ["NonMagicControl", "magic"] } });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NonMagicControlDirective, [{
         type: Directive,
         args: [{
                 selector: '[NonMagicControl]'
             }]
-    }], function () { return [{ type: TaskMagicService }, { type: ElementRef }, { type: Renderer2 }, { type: ViewContainerRef }]; }, { magic: [{
+    }], function () { return [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, { magic: [{
             type: Input,
             args: ['NonMagicControl']
         }] }); })();
@@ -4095,21 +4127,10 @@ const decs = [
     MagicViewContainerRef
 ];
 class MagicModule {
-    static forRoot() {
-        return {
-            ngModule: MagicModule,
-            providers: [
-                EngineMagicService,
-                ComponentListMagicService,
-                CommandsCollectorMagicService,
-                RouterCommandsMagicService,
-                OverlayWindowService,
-            ]
-        };
-    }
 }
-MagicModule.ɵmod = ɵɵdefineNgModule({ type: MagicModule });
-MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t) { return new (t || MagicModule)(); }, providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [[
+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,
@@ -4117,7 +4138,24 @@ MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t
             DynamicModule,
             HttpClientModule
         ]] });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [...decs],
+                exports: [...decs],
+                entryComponents: [],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule,
+                    DynamicModule,
+                    HttpClientModule
+                ],
+                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
         CheckboxMagicDirective,
         CheckboxNoFormControlMagicDirective,
         InputNoFormControlMagicDirective,
@@ -4176,24 +4214,7 @@ MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t
         RangeValidatorMagicDirective,
         NonMagicControlDirective,
         MagicFocusDirective,
-        MagicViewContainerRef] }); })();
-(function () { ɵsetClassMetadata(MagicModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [...decs],
-                exports: [...decs],
-                entryComponents: [],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    RouterModule,
-                    DynamicModule,
-                    HttpClientModule
-                ],
-                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
-            }]
-    }], null, null); })();
+        MagicViewContainerRef] }); })();
 const MG_FORMATS = {
     parse: { dateInput: { month: 'short', year: 'numeric', day: 'numeric' } },
@@ -4286,11 +4307,11 @@ class MgDateAdapter extends NativeDateAdapter {
         }
     }
 }
-MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(ɵɵinject(Platform), ɵɵinject(TaskMagicService)); };
-MgDateAdapter.ɵprov = ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
-(function () { ɵsetClassMetadata(MgDateAdapter, [{
+MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(i0.ɵɵinject(i1$2.Platform), i0.ɵɵinject(TaskMagicService)); };
+MgDateAdapter.ɵprov = i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgDateAdapter, [{
         type: Injectable
-    }], function () { return [{ type: Platform }, { type: TaskMagicService }]; }, null); })();
+    }], function () { return [{ type: i1$2.Platform }, { type: TaskMagicService }]; }, null); })();
 const matDateProviders = [
     { provide: DateAdapter, useClass: MgDateAdapter },
@@ -4379,5 +4400,5 @@ class ModalFormDefinition {
     }
 }
-export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_DEFAULT_VALUE_ACCESSOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, 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, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
-//# sourceMappingURL=magic-xpa-angular.js.map
+export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_DEFAULT_VALUE_ACCESSOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, 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, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
+//# sourceMappingURL=magic-xpa-angular.mjs.map