@magic-xpa/angular 4.800.0 → 4.801.0-dev000.0

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

@@ -1,21 +1,24 @@
-import { isNullOrUndefined, isUndefined } from 'util';
-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 { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
+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 { NString, List, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
-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() {
@@ -196,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;
@@ -228,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)
@@ -268,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 {
@@ -307,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) {
@@ -366,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 {
@@ -389,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;
@@ -405,6 +437,7 @@ class SubformMagicService {
         this.componentListMagicService = componentListMagicService;
         this.loader = loader;
         this.injector = injector;
+        this.compiler = compiler;
         this.subformsDict = {};
         this.routesDict = {};
         this.currentRouteDefinition = null;
@@ -446,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 }
@@ -556,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) {
@@ -604,7 +638,7 @@ class RouterContainerMagicComponent {
             guiEvent.RouterPath = tokens[0];
             guiEvent.RouterParams = new List();
             for (let i = 1; i < tokens.length; i++) {
-                guiEvent.RouterParams.push(this.activatedRoute.snapshot.params[tokens[i]]);
+                guiEvent.RouterParams.push(currentActiveRoute.snapshot.params[tokens[i]]);
             }
         }
         this.containerTaskService.insertEvent(guiEvent);
@@ -642,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() {
@@ -771,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) {
@@ -879,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>
@@ -930,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: [{
@@ -953,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); })();
 
@@ -967,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',
@@ -992,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',
@@ -1016,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();
@@ -1042,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);
                 });
             }
@@ -1091,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',
@@ -1132,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
@@ -1147,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',
@@ -1216,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',
@@ -1306,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); })();
 
@@ -1420,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;
@@ -2131,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); })();
 
@@ -2199,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); })();
 
@@ -2213,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) {
@@ -2507,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); })();
 
@@ -2526,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); })();
 
@@ -2589,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
@@ -2638,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: [{
@@ -2798,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])) {
@@ -2830,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,
@@ -3016,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,
@@ -3057,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'
@@ -3327,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]'
@@ -3379,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'
@@ -3419,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] ',
@@ -3439,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; }
     ;
@@ -3463,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',
@@ -3481,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;
@@ -3561,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',
@@ -3587,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: [{
@@ -3606,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: `
@@ -3630,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])`,
@@ -3650,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) {
@@ -3778,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',
@@ -3855,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,
@@ -3877,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: `
@@ -3902,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: `
@@ -3933,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: `
@@ -3957,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]),
@@ -4003,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: [{
@@ -4053,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']
         }] }); })();
@@ -4096,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,
@@ -4118,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,
@@ -4177,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' } },
@@ -4287,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 },
@@ -4380,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