@magic-xpa/angular 4.800.0-dev480.95 → 4.800.1

package/fesm2015/magic-xpa-angular.js

@@ -1,21 +1,26 @@
 import { isNullOrUndefined, isUndefined } from 'util';
-import { ɵɵdefineInjectable, ɵsetClassMetadata, Injectable, Input, Output, ɵɵdirectiveInject, ViewContainerRef, ComponentFactoryResolver, ɵɵdefineDirective, Directive, ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵtext, ɵɵelementEnd, ɵɵadvance, ɵɵtextInterpolate1, EventEmitter, Injector, ɵɵdefineComponent, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵelement, ɵɵproperty, Component, ViewChild, ElementRef, NgModuleFactoryLoader, ChangeDetectorRef, ɵɵstaticViewQuery, ɵɵgetInheritedFactory, ɵɵinject, ɵɵProvidersFeature, HostListener, Renderer2, Optional, ɵɵdefinePipe, Pipe, ɵɵprojection, ɵɵprojectionDef, ɵɵelementContainer, ɵɵreference, ɵɵresolveWindow, ɵɵtemplateRefExtractor, forwardRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
-import { NgIf, NgStyle, DatePipe, NgTemplateOutlet, CommonModule, formatDate } from '@angular/common';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, Output, Directive, EventEmitter, ViewChild, HostListener, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DatePipe, CommonModule, formatDate } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DynamicComponent, DynamicIoDirective, DynamicModule } from 'ng-dynamic-component';
+import * as i3 from 'ng-dynamic-component';
+import { DynamicModule } from 'ng-dynamic-component';
 import { __awaiter, __decorate, __metadata } from 'tslib';
 import { Subject } from 'rxjs';
 import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
 import { InteractiveCommandType, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
-import { MagicProperties, StorageAttribute, Logger, BindingLevel, StorageAttributeType, StrUtil, PICInterface } from '@magic-xpa/utils';
+import { MagicProperties, Logger, StrUtil, StorageAttribute, BindingLevel, StorageAttributeType, PICInterface } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
-import { NString, StringBuilder, List, RefParam } from '@magic-xpa/mscorelib';
-import { Title } from '@angular/platform-browser';
+import { NString, List, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
+import * as i1$1 from '@angular/platform-browser';
 import { fromEvent } from 'rxjs/internal/observable/fromEvent';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+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() {
@@ -268,8 +273,8 @@ class EngineMagicService {
     }
 }
 EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
-EngineMagicService.ɵprov = ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
-(function () { ɵsetClassMetadata(EngineMagicService, [{
+EngineMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
+(function () { i0.ɵsetClassMetadata(EngineMagicService, [{
         type: Injectable
     }], null, null); })();
 
@@ -335,6 +340,324 @@ StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
     [MagicProperties.Wallpaper, "background-image"]
 ]);
 
+class CommandsCollectorMagicService {
+    constructor(magic) {
+        this.magic = magic;
+        this.count = 0;
+        this.commands = new List();
+        this.subscription = null;
+    }
+    startCollecting() {
+        this.count++;
+        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
+        if (this.subscription === null) {
+            this.subscription = this.magic.refreshDom
+                .subscribe(command => {
+                this.commands.push(command);
+            });
+        }
+    }
+    stopCollecting() {
+        this.count--;
+        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
+        if (this.count === 0) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+    GetCommands(taskId) {
+        const commands = this.commands.filter((command) => command.TaskTag === taskId);
+        commands.forEach(command => { this.commands.Remove(command); });
+        return commands;
+    }
+}
+CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
+CommandsCollectorMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
+(function () { i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
+        type: Injectable
+    }], function () { return [{ type: EngineMagicService }]; }, null); })();
+
+class RouteCommand {
+}
+class RouterCommandsMagicService {
+    constructor() {
+        this.pendingRouteCommands = [];
+    }
+    AddRouteCommand(routeCommand) {
+        this.pendingRouteCommands.push(routeCommand);
+    }
+    ExecuteNextCommand() {
+        let pendingRouteCommand = this.pendingRouteCommands.shift();
+        if (!isNullOrUndefined(pendingRouteCommand)) {
+            pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
+        }
+    }
+}
+RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
+RouterCommandsMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
+(function () { i0.ɵsetClassMetadata(RouterCommandsMagicService, [{
+        type: Injectable
+    }], null, null); })();
+
+class SubformMagicService {
+    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector) {
+        this.task = task;
+        this.activatedRoute = activatedRoute;
+        this.componentList = componentList;
+        this.pendingCommandsCollector = pendingCommandsCollector;
+        this.router = router;
+        this.routerCommandsMagicService = routerCommandsMagicService;
+        this.componentListMagicService = componentListMagicService;
+        this.loader = loader;
+        this.injector = injector;
+        this.subformsDict = {};
+        this.routesDict = {};
+        this.currentRouteDefinition = null;
+    }
+    mgGetComp(subformName) {
+        if (subformName in this.subformsDict) {
+            let formName = this.subformsDict[subformName].formName;
+            if (formName)
+                return this.componentList.getComponent(formName);
+        }
+        return null;
+    }
+    mgGetParameters(subformName) {
+        if (subformName in this.subformsDict) {
+            return this.subformsDict[subformName].parameters;
+        }
+        else
+            return "";
+    }
+    deleteSubformComp(subformControlName, formName) {
+        if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+            if (this.subformsDict[subformControlName].formName === formName) {
+                this.subformsDict[subformControlName] = {};
+                this.task.refreshView();
+            }
+        }
+    }
+    addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
+        this.pendingCommandsCollector.startCollecting();
+        let refreshNeeded = false;
+        if (isNullOrUndefined(routerPath)) {
+            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+                if (this.subformsDict[subformControlName].formName === formName) {
+                    this.subformsDict[subformControlName] = {};
+                    this.task.refreshView();
+                }
+            }
+            let moduleRef = this.componentListMagicService.getModuleRef(formName);
+            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);
+                        this.subformsDict[subformControlName] = {
+                            formName,
+                            parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                        };
+                        this.task.refreshView();
+                    });
+                }
+            }
+            else {
+                this.subformsDict[subformControlName] = {
+                    formName,
+                    parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                };
+                refreshNeeded = true;
+            }
+        }
+        else {
+            if (inDefaultOutlet)
+                subformControlName = "primary";
+            let routeParams = new List();
+            routeParams.push(routerPath);
+            if (params !== null) {
+                routeParams = routeParams.concat(params);
+            }
+            let routeCommand = {
+                callerMgSubformServiceRef: this,
+                routerOutletName: subformControlName,
+                formName: formName,
+                parameters: { taskIdParam: taskId, taskDescription: taskDescription },
+                routeParams: routeParams
+            };
+            if (SubformMagicService.currentCallerMgSubformServiceRef === null)
+                this.ExecuteRouteCommand(routeCommand);
+            else
+                this.routerCommandsMagicService.AddRouteCommand(routeCommand);
+        }
+        if (refreshNeeded)
+            this.task.refreshView();
+    }
+    ExecuteRouteCommand(routeCommand) {
+        let reusingComponent = false;
+        let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
+        let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
+        if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
+            currentSubformMagicService.router.navigate([{ outlets: { [routeCommand.routerOutletName]: null } }], { relativeTo: relativeRoute })
+                .then((result) => {
+                SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
+                currentSubformMagicService.currentRouteDefinition = {
+                    formName: routeCommand.formName,
+                    parameters: routeCommand.parameters
+                };
+                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
+            });
+        }
+        else {
+            SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
+            currentSubformMagicService.currentRouteDefinition = {
+                formName: routeCommand.formName,
+                parameters: routeCommand.parameters
+            };
+            if (SubformMagicService.routerContainers.length > 0) {
+                let routeContainer = SubformMagicService.routerContainers[0];
+                SubformMagicService.routerContainers.shift();
+                routeContainer.initializeComponent();
+            }
+            else {
+                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
+            }
+        }
+    }
+    PerformRouterNavigate(routerOutletName, routeParams) {
+        let relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+        this.router.navigate([{ outlets: { [routerOutletName]: routeParams } }], { relativeTo: relativeRoute })
+            .then((result) => {
+            if (result !== null && !result) {
+                let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+                subformMagicService.currentRouteDefinition = null;
+                SubformMagicService.currentCallerMgSubformServiceRef = null;
+                subformMagicService.pendingCommandsCollector.stopCollecting();
+                subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
+            }
+        });
+    }
+    init() {
+        const pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
+        if (pendingCommands.length > 0) {
+            pendingCommands.forEach(command => { this.task.executeCommand(command); });
+            this.task.refreshView();
+        }
+        this.pendingCommandsCollector.stopCollecting();
+    }
+    refreshView() {
+        this.task.refreshView();
+    }
+    static getRelativeRoute(sendActivatedRoute) {
+        let currentActiveRoute = sendActivatedRoute;
+        if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
+            currentActiveRoute = currentActiveRoute.parent;
+            if (!currentActiveRoute.snapshot.routeConfig.loadChildren)
+                console.log("getRelativeRoute(): both path and currentActiveRoute.snapshot.routeConfig.loadChildren are empty.");
+        }
+        return currentActiveRoute;
+    }
+}
+SubformMagicService.currentCallerMgSubformServiceRef = null;
+SubformMagicService.routerContainers = new Array();
+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(i0.NgModuleFactoryLoader), i0.ɵɵinject(i0.Injector)); };
+SubformMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
+(function () { i0.ɵsetClassMetadata(SubformMagicService, [{
+        type: Injectable
+    }], function () { return [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: i0.NgModuleFactoryLoader }, { type: i0.Injector }]; }, null); })();
+
+class RouterContainerMagicComponent {
+    constructor(activatedRoute, router, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.magic = magic;
+        this.containerTaskService = containerTaskService;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.componentList = componentList;
+        this.pendingCommandsCollector = pendingCommandsCollector;
+        this.routerCommandsMagicService = routerCommandsMagicService;
+        this.componentRef = null;
+        this.parentMgSubformService = null;
+    }
+    static get LastRoute() {
+        return RouterContainerMagicComponent.lastRoute;
+    }
+    ngOnInit() {
+        let outletname = this.activatedRoute.outlet;
+        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+        let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+        RouterContainerMagicComponent.lastRoute = this.router.url;
+        if (subformMagicService == null || subformMagicService.currentRouteDefinition === null) {
+            this.insertRouteEvent(currentActiveRoute);
+            SubformMagicService.routerContainers.push(this);
+        }
+        else {
+            this.initializeComponent();
+        }
+    }
+    insertRouteEvent(currentActiveRoute) {
+        let guiEvent = getGuiEventObj('RouterNavigate', null, 0);
+        guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
+        if (currentActiveRoute.snapshot.outlet !== 'primary')
+            guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
+        let calcRouterPath = currentActiveRoute.routeConfig.path;
+        if (calcRouterPath.length > 0) {
+            let routerPath = calcRouterPath;
+            let tokens = StrUtil.tokenize(routerPath, "/:");
+            guiEvent.RouterPath = tokens[0];
+            guiEvent.RouterParams = new List();
+            for (let i = 1; i < tokens.length; i++) {
+                guiEvent.RouterParams.push(currentActiveRoute.snapshot.params[tokens[i]]);
+            }
+        }
+        this.containerTaskService.insertEvent(guiEvent);
+    }
+    initializeComponent() {
+        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+        if (subformMagicService.currentRouteDefinition !== null) {
+            let comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
+            this.componentRef = this.viewContainerRef.createComponent(componentFactory);
+            Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
+            let myActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+            let routeParams = StrUtil.tokenize(myActiveRoute.snapshot.routeConfig.path, "/:");
+            subformMagicService.routesDict[myActiveRoute.snapshot.outlet] = routeParams[0];
+            this.parentMgSubformService = subformMagicService;
+            subformMagicService.currentRouteDefinition = null;
+            SubformMagicService.currentCallerMgSubformServiceRef = null;
+            let ignoreParamChange = true;
+            myActiveRoute.paramMap.subscribe(params => {
+                if (!ignoreParamChange)
+                    this.insertRouteEvent(myActiveRoute);
+                ignoreParamChange = false;
+            });
+            this.parentMgSubformService.refreshView();
+            this.routerCommandsMagicService.ExecuteNextCommand();
+        }
+    }
+    ngOnDestroy() {
+        if (this.componentRef != null) {
+            this.componentRef.instance.task.close();
+            let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+            this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
+            RouterContainerMagicComponent.lastRoute = this.router.url;
+        }
+    }
+}
+RouterContainerMagicComponent.lastRoute = "/";
+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 () { i0.ɵsetClassMetadata(RouterContainerMagicComponent, [{
+        type: Component,
+        args: [{
+                selector: 'magic-route-outlet',
+                template: `
+  `
+            }]
+    }], 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() {
         try {
@@ -363,6 +686,9 @@ class GuiInteractiveExecutor {
                 case InteractiveCommandType.REFRESH_PAGE:
                     this.OnRefreshPage();
                     break;
+                case InteractiveCommandType.GET_LAST_ROUTE:
+                    this.OnGetLastRoute();
+                    break;
             }
         }
         catch (ex) {
@@ -422,6 +748,9 @@ class GuiInteractiveExecutor {
         else
             this.command._boolVal = this.task.Records.list[guiRowIndex].isEditing;
     }
+    OnGetLastRoute() {
+        this.command.resultString = RouterContainerMagicComponent.LastRoute;
+    }
 }
 
 let BaseMagicOverlayContainer = class BaseMagicOverlayContainer {
@@ -451,37 +780,37 @@ class MagicViewContainerRef {
         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 () { 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) {
@@ -555,38 +884,38 @@ 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, true);
+        i0.ɵɵviewQuery(_c1$1, true);
     } 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();
+        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%]{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 () { i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
         args: [{
                 selector: 'app-magic-overlay-container',
@@ -609,7 +938,7 @@ MagicOverlayContainer.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayContainer,
   `,
                 styleUrls: ['./magic-overlay-container.css']
             }]
-    }], function () { return [{ type: Injector }, { type: ComponentFactoryResolver }]; }, { headerElementRef: [{
+    }], function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
         }], foregroundElementRef: [{
@@ -629,8 +958,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 () { i0.ɵsetClassMetadata(OverlayContainerMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
@@ -643,8 +972,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 () { i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -668,8 +997,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 () { i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -692,16 +1021,16 @@ 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 () { 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) {
         this.componentListMagicService = componentListMagicService;
@@ -767,22 +1096,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(i0.NgModuleFactoryLoader), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵstaticViewQuery(_c0$2, true);
     } if (rf & 2) {
         var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.overlayContainerWrapperElementRef = _t.first);
+        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();
+        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%] {\n      \n      position: fixed;\n      top: 0;\n      z-index: 999;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }"] });
-(function () { ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
+(function () { i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
         type: Component,
         args: [{
                 selector: 'app-magic-overlay-container-wrapper',
@@ -808,7 +1137,7 @@ MagicOverlayContainerWrapper.ɵcmp = ɵɵdefineComponent({ type: MagicOverlayCon
     }
   `]
             }]
-    }], function () { return [{ type: ComponentListMagicService }, { type: NgModuleFactoryLoader }, { type: Injector }, { type: ComponentFactoryResolver }, { type: ChangeDetectorRef }]; }, { Component: [{
+    }], function () { return [{ type: ComponentListMagicService }, { type: i0.NgModuleFactoryLoader }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }]; }, { Component: [{
             type: Input
         }], Parameters: [{
             type: Input
@@ -824,29 +1153,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.ɵ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, " ");
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+        i0.ɵɵadvance(2);
+        i0.ɵɵ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, [{
+const ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent);
+(function () { i0.ɵsetClassMetadata(MagicAlertComponent, [{
         type: Component,
         args: [{
                 selector: 'sample-magic-alert-component',
@@ -893,33 +1222,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.ɵ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, " ");
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵ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, [{
+const ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
+(function () { i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
         type: Component,
         args: [{
                 selector: 'sample-magic-confirmation-box',
@@ -982,8 +1311,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 () { i0.ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
@@ -1096,11 +1425,11 @@ 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, [{
+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 });
+(function () { i0.ɵsetClassMetadata(OverlayWindowService, [{
         type: Injectable
-    }], function () { return [{ type: ComponentFactoryResolver }, { type: ComponentListMagicService }, { type: EngineMagicService }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }]; }, null); })();
+    }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: ComponentListMagicService }, { type: EngineMagicService }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }]; }, null); })();
 class OverlayWindowFocusManager {
     constructor(rootMagicElement) {
         this.rootMagicElement = null;
@@ -1530,6 +1859,7 @@ class TaskMagicService {
                             control.setValidators([control.validator, this.customValidator(guiRowId.toString(), controlId)]);
                         else
                             control.setValidators(this.customValidator(guiRowId.toString(), controlId));
+                        control.updateValueAndValidity();
                     }
                 }
                 break;
@@ -1542,7 +1872,7 @@ class TaskMagicService {
                 properties.setStyle(command.Operation, command.obj1);
                 break;
             case CommandType.SET_ATTRIBUTE:
-                properties = this.Records.list[guiRowId].getControlMetadata(controlId);
+                properties = this.Records.list[0].getControlMetadata(controlId);
                 properties.dataType = String.fromCharCode(command.number);
                 break;
             case CommandType.SET_VALUE:
@@ -1695,328 +2025,122 @@ class TaskMagicService {
         this.refreshDom.complete();
         this.detectChanges.complete();
         this.subscribeInteractiveCommands.unsubscribe();
-        this.subscribeRefreshDom.unsubscribe();
-        this.interactiveCommands.complete();
-        this.customPropertiesSubject.complete();
-        this.OnSelectedRowChanged.complete();
-    }
-    onComboboxSelectionChanged(event, idx, line) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, line);
-        if (typeof (event) == 'number') {
-            guiEvent.Value = event;
-        }
-        else {
-            if (!isNullOrUndefined(event.target)) {
-                let indexes = new Array(event.target.selectedOptions.length);
-                for (let i = 0; i < event.target.selectedOptions.length; i++) {
-                    indexes[i] = event.target.selectedOptions[i].index;
-                }
-                guiEvent.Value = indexes.join(',');
-            }
-            else
-                guiEvent.Value = event.value;
-        }
-        this.insertEvent(guiEvent);
-    }
-    onListBoxSelectionChanged(event, idx) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        let selectedOptions;
-        if (!isNullOrUndefined(event.target))
-            selectedOptions = event.target.selectedOptions;
-        else
-            selectedOptions = event.source.selectedOptions.selected;
-        let length = selectedOptions.length;
-        let indexes = new Array(length);
-        for (let i = 0; i < length; i++) {
-            if (!isNullOrUndefined(event.target))
-                indexes[i] = (selectedOptions[i]).index;
-            else
-                indexes[i] = (selectedOptions[i]).value;
-        }
-        guiEvent.Value = indexes;
-        this.insertEvent(guiEvent);
-    }
-    onCheckChanged(event, idx, rowId) {
-        if (typeof rowId === 'undefined')
-            rowId = 0;
-        let guiEvent = getGuiEventObj('selectionchanged', idx, rowId);
-        if (typeof (event) == 'boolean') {
-            guiEvent.Value = event;
-        }
-        else {
-            if (typeof event.target === 'undefined')
-                guiEvent.Value = (event).checked;
-            else
-                guiEvent.Value = (event.target).checked;
-        }
-        this.insertEvent(guiEvent);
-    }
-    mgOnTabSelectionChanged(idx, layer) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        guiEvent.Value = layer.toString();
-        this.insertEvent(guiEvent);
-    }
-    mgOnRadioSelectionChanged(event, idx) {
-        let result = this.getFormControl('0', idx);
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        if (typeof result.value !== 'string')
-            guiEvent.Value = result.value.index;
-        else
-            guiEvent.Value = result.value;
-        this.insertEvent(guiEvent);
-    }
-    close() {
-        this.insertEvent(getGuiEventObj('close', null, 0));
-    }
-    IsStub() {
-        return this.magic.isStub;
-    }
-    saveData(data) {
-        this.magic.saveData(data);
-    }
-    createData() {
-        let myData = {
-            records: this.Records,
-            template: this.template
-        };
-        let text = 'loadData():any   {\n' +
-            '    let stubData = ' + JSON.stringify(myData) + ';\n' +
-            '    this.loadStubData(stubData);}';
-        console.log(text);
-        this.saveData(text);
-    }
-    loadStubData(stubData) {
-        this.Records = stubData.records;
-        this.settemplate(stubData.template);
-        this.taskId = '1';
-        for (let i = 0; i < this.Records.list.length; i++)
-            this.buildTableRowControls(i);
-    }
-    loadData() {
-        alert('Please, overwrite method loadData');
-    }
-    setStubValue(guiRowId, fc, name) {
-        if (this.IsStub()) {
-            try {
-                let val = this.Records.list[guiRowId].values[name];
-                fc.setValue(val);
-            }
-            catch (e) {
-            }
-        }
-    }
-}
-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, [{
-        type: Injectable
-    }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
-
-class CommandsCollectorMagicService {
-    constructor(magic) {
-        this.magic = magic;
-        this.count = 0;
-        this.commands = new List();
-        this.subscription = null;
-    }
-    startCollecting() {
-        this.count++;
-        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
-        if (this.subscription === null) {
-            this.subscription = this.magic.refreshDom
-                .subscribe(command => {
-                this.commands.push(command);
-            });
-        }
-    }
-    stopCollecting() {
-        this.count--;
-        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
-        if (this.count === 0) {
-            this.subscription.unsubscribe();
-            this.subscription = null;
-        }
-    }
-    GetCommands(taskId) {
-        const commands = this.commands.filter((command) => command.TaskTag === taskId);
-        commands.forEach(command => { this.commands.Remove(command); });
-        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
-    }], function () { return [{ type: EngineMagicService }]; }, null); })();
-
-class RouteCommand {
-}
-class RouterCommandsMagicService {
-    constructor() {
-        this.pendingRouteCommands = [];
-    }
-    AddRouteCommand(routeCommand) {
-        this.pendingRouteCommands.push(routeCommand);
-    }
-    ExecuteNextCommand() {
-        let pendingRouteCommand = this.pendingRouteCommands.shift();
-        if (!isNullOrUndefined(pendingRouteCommand)) {
-            pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
-        }
-    }
-}
-RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-RouterCommandsMagicService.ɵprov = ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
-(function () { ɵsetClassMetadata(RouterCommandsMagicService, [{
-        type: Injectable
-    }], null, null); })();
-
-class SubformMagicService {
-    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService) {
-        this.task = task;
-        this.activatedRoute = activatedRoute;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.router = router;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-        this.subformsDict = {};
-        this.routesDict = {};
-        this.currentRouteDefinition = null;
-    }
-    mgGetComp(subformName) {
-        if (subformName in this.subformsDict) {
-            let formName = this.subformsDict[subformName].formName;
-            if (formName)
-                return this.componentList.getComponent(formName);
-        }
-        return null;
-    }
-    mgGetParameters(subformName) {
-        if (subformName in this.subformsDict) {
-            return this.subformsDict[subformName].parameters;
-        }
-        else
-            return "";
-    }
-    deleteSubformComp(subformControlName, formName) {
-        if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-            if (this.subformsDict[subformControlName].formName === formName) {
-                this.subformsDict[subformControlName] = {};
-                this.task.refreshView();
-            }
-        }
-    }
-    addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
-        this.pendingCommandsCollector.startCollecting();
-        let refreshNeeded = false;
-        if (isNullOrUndefined(routerPath)) {
-            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-                if (this.subformsDict[subformControlName].formName === formName) {
-                    this.subformsDict[subformControlName] = {};
-                    this.task.refreshView();
-                }
-            }
-            this.subformsDict[subformControlName] = {
-                formName,
-                parameters: { taskIdParam: taskId, taskDescription: taskDescription }
-            };
-            refreshNeeded = true;
+        this.subscribeRefreshDom.unsubscribe();
+        this.interactiveCommands.complete();
+        this.customPropertiesSubject.complete();
+        this.OnSelectedRowChanged.complete();
+    }
+    onComboboxSelectionChanged(event, idx, line) {
+        let guiEvent = getGuiEventObj('selectionchanged', idx, line);
+        if (typeof (event) == 'number') {
+            guiEvent.Value = event;
         }
         else {
-            if (inDefaultOutlet)
-                subformControlName = "primary";
-            let routeParams = new List();
-            routeParams.push(routerPath);
-            if (params !== null) {
-                routeParams = routeParams.concat(params);
+            if (!isNullOrUndefined(event.target)) {
+                let indexes = new Array(event.target.selectedOptions.length);
+                for (let i = 0; i < event.target.selectedOptions.length; i++) {
+                    indexes[i] = event.target.selectedOptions[i].index;
+                }
+                guiEvent.Value = indexes.join(',');
             }
-            let routeCommand = {
-                callerMgSubformServiceRef: this,
-                routerOutletName: subformControlName,
-                formName: formName,
-                parameters: { taskIdParam: taskId, taskDescription: taskDescription },
-                routeParams: routeParams
-            };
-            if (SubformMagicService.currentCallerMgSubformServiceRef === null)
-                this.ExecuteRouteCommand(routeCommand);
             else
-                this.routerCommandsMagicService.AddRouteCommand(routeCommand);
+                guiEvent.Value = event.value;
         }
-        if (refreshNeeded)
-            this.task.refreshView();
+        this.insertEvent(guiEvent);
     }
-    ExecuteRouteCommand(routeCommand) {
-        let reusingComponent = false;
-        let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
-        let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
-        if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
-            currentSubformMagicService.router.navigate([{ outlets: { [routeCommand.routerOutletName]: null } }], { relativeTo: relativeRoute })
-                .then((result) => {
-                SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
-                currentSubformMagicService.currentRouteDefinition = {
-                    formName: routeCommand.formName,
-                    parameters: routeCommand.parameters
-                };
-                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
-            });
+    onListBoxSelectionChanged(event, idx) {
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        let selectedOptions;
+        if (!isNullOrUndefined(event.target))
+            selectedOptions = event.target.selectedOptions;
+        else
+            selectedOptions = event.source.selectedOptions.selected;
+        let length = selectedOptions.length;
+        let indexes = new Array(length);
+        for (let i = 0; i < length; i++) {
+            if (!isNullOrUndefined(event.target))
+                indexes[i] = (selectedOptions[i]).index;
+            else
+                indexes[i] = (selectedOptions[i]).value;
+        }
+        guiEvent.Value = indexes;
+        this.insertEvent(guiEvent);
+    }
+    onCheckChanged(event, idx, rowId) {
+        if (typeof rowId === 'undefined')
+            rowId = 0;
+        let guiEvent = getGuiEventObj('selectionchanged', idx, rowId);
+        if (typeof (event) == 'boolean') {
+            guiEvent.Value = event;
         }
         else {
-            SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
-            currentSubformMagicService.currentRouteDefinition = {
-                formName: routeCommand.formName,
-                parameters: routeCommand.parameters
-            };
-            if (SubformMagicService.routerContainers.length > 0) {
-                let routeContainer = SubformMagicService.routerContainers[0];
-                SubformMagicService.routerContainers.shift();
-                routeContainer.initializeComponent();
-            }
-            else {
-                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
-            }
+            if (typeof event.target === 'undefined')
+                guiEvent.Value = (event).checked;
+            else
+                guiEvent.Value = (event.target).checked;
         }
+        this.insertEvent(guiEvent);
     }
-    PerformRouterNavigate(routerOutletName, routeParams) {
-        let relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-        this.router.navigate([{ outlets: { [routerOutletName]: routeParams } }], { relativeTo: relativeRoute })
-            .then((result) => {
-            if (result !== null && !result) {
-                let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-                subformMagicService.currentRouteDefinition = null;
-                SubformMagicService.currentCallerMgSubformServiceRef = null;
-                subformMagicService.pendingCommandsCollector.stopCollecting();
-                subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
-            }
-        });
+    mgOnTabSelectionChanged(idx, layer) {
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        guiEvent.Value = layer.toString();
+        this.insertEvent(guiEvent);
     }
-    init() {
-        const pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
-        if (pendingCommands.length > 0) {
-            pendingCommands.forEach(command => { this.task.executeCommand(command); });
-            this.task.refreshView();
-        }
-        this.pendingCommandsCollector.stopCollecting();
+    mgOnRadioSelectionChanged(event, idx) {
+        let result = this.getFormControl('0', idx);
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        if (typeof result.value !== 'string')
+            guiEvent.Value = result.value.index;
+        else
+            guiEvent.Value = result.value;
+        this.insertEvent(guiEvent);
     }
-    refreshView() {
-        this.task.refreshView();
+    close() {
+        this.insertEvent(getGuiEventObj('close', null, 0));
     }
-    static getRelativeRoute(sendActivatedRoute) {
-        let currentActiveRoute = sendActivatedRoute;
-        if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
-            currentActiveRoute = currentActiveRoute.parent;
-            if (!currentActiveRoute.snapshot.routeConfig.loadChildren)
-                console.log("getRelativeRoute(): both path and currentActiveRoute.snapshot.routeConfig.loadChildren are empty.");
+    IsStub() {
+        return this.magic.isStub;
+    }
+    saveData(data) {
+        this.magic.saveData(data);
+    }
+    createData() {
+        let myData = {
+            records: this.Records,
+            template: this.template
+        };
+        let text = 'loadData():any   {\n' +
+            '    let stubData = ' + JSON.stringify(myData) + ';\n' +
+            '    this.loadStubData(stubData);}';
+        console.log(text);
+        this.saveData(text);
+    }
+    loadStubData(stubData) {
+        this.Records = stubData.records;
+        this.settemplate(stubData.template);
+        this.taskId = '1';
+        for (let i = 0; i < this.Records.list.length; i++)
+            this.buildTableRowControls(i);
+    }
+    loadData() {
+        alert('Please, overwrite method loadData');
+    }
+    setStubValue(guiRowId, fc, name) {
+        if (this.IsStub()) {
+            try {
+                let val = this.Records.list[guiRowId].values[name];
+                fc.setValue(val);
+            }
+            catch (e) {
+            }
         }
-        return currentActiveRoute;
     }
 }
-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)); };
-SubformMagicService.ɵprov = ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
-(function () { ɵsetClassMetadata(SubformMagicService, [{
+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 () { i0.ɵsetClassMetadata(TaskMagicService, [{
         type: Injectable
-    }], function () { return [{ type: TaskMagicService }, { type: ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: Router }, { type: RouterCommandsMagicService }]; }, null); })();
+    }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
 
 class TableMagicService {
     constructor(componentList, task) {
@@ -2080,9 +2204,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 () { i0.ɵsetClassMetadata(TableMagicService, [{
         type: Injectable
     }], function () { return [{ type: ComponentListMagicService }, { type: TaskMagicService }]; }, null); })();
 
@@ -2094,11 +2218,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 () { i0.ɵsetClassMetadata(TitleMagicService, [{
         type: Injectable
-    }], function () { return [{ type: Title }]; }, null); })();
+    }], function () { return [{ type: i1$1.Title }]; }, null); })();
 
 class AccessorMagicService {
     constructor(task) {
@@ -2246,6 +2370,18 @@ class AccessorMagicService {
     getItemListValues(id, rowId) {
         return this.getProperty(id, HtmlProperties.ItemsList, rowId);
     }
+    getFilteredList(controlId, rowId) {
+        if (isNullOrUndefined(rowId))
+            rowId = '0';
+        let items = this.getItemListValues(controlId, rowId);
+        let value = this.task.getFormControl(rowId, controlId).value;
+        if (value !== null && value !== "" && items instanceof Array) {
+            value = value.toLowerCase();
+            return items.filter(option => option.displayValue.toLowerCase().includes(value));
+        }
+        else
+            return items;
+    }
     getDisplayValue(id, rowId) {
         let displayValue = "";
         let o = this.getProperty(id, HtmlProperties.ItemsList, rowId);
@@ -2376,9 +2512,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 () { i0.ɵsetClassMetadata(AccessorMagicService, [{
         type: Injectable
     }], function () { return [{ type: TaskMagicService }]; }, null); })();
 
@@ -2395,9 +2531,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 () { i0.ɵsetClassMetadata(MagicServices, [{
         type: Injectable
     }], function () { return [{ type: TaskMagicService }, { type: SubformMagicService }, { type: TableMagicService }, { type: TitleMagicService }, { type: AccessorMagicService }]; }, null); })();
 
@@ -2458,16 +2594,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 () { 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
@@ -2502,20 +2638,21 @@ class RowMagicDirective {
     onClick($event) {
         if (this.rowId != '') {
             this._task.insertEvent(getGuiEventObj('click', "magicRow", +this.rowId));
-            event.cancelBubble = true;
+            if (MagicDirective.noOfAutoCompleteBoxesOpened < 1)
+                event.cancelBubble = true;
         }
     }
 }
-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 () { 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: [{
@@ -2561,7 +2698,8 @@ class MagicDirective {
                 if (this.htmlElement instanceof HTMLButtonElement)
                     fromButton = true;
                 this.task.insertEvent(getGuiEventObj(event, this.id, +this.rowId, fromButton));
-                e.cancelBubble = true;
+                if (MagicDirective.noOfAutoCompleteBoxesOpened < 1)
+                    e.cancelBubble = true;
             });
         });
         this.renderer.listen(this.htmlElement, 'change', (e) => {
@@ -2601,7 +2739,7 @@ class MagicDirective {
                 (e.keyCode >= GuiConstants.KEY_F1 && e.keyCode <= GuiConstants.KEY_F12);
             if (guiEvent.modifiers !== Modifiers.MODIFIER_NONE || supportedKey) {
                 guiEvent.keyCode = e.keyCode;
-                if (e.keyCode !== GuiConstants.KEY_ESC || e.keyCode === GuiConstants.KEY_ESC && !MagicDirective.opened)
+                if (e.keyCode !== GuiConstants.KEY_ESC || e.keyCode === GuiConstants.KEY_ESC && (!MagicDirective.opened && MagicDirective.noOfAutoCompleteBoxesOpened < 1))
                     e.cancelBubble = true;
                 this.task.insertEvent(guiEvent);
             }
@@ -2696,14 +2834,15 @@ class MagicDirective {
     }
 }
 MagicDirective.opened = false;
-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.noOfAutoCompleteBoxesOpened = 0;
+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 () { 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,
@@ -2882,104 +3021,20 @@ 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 () { 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,
             args: ['magicnc']
         }] }); })();
 
-class RouterContainerMagicComponent {
-    constructor(activatedRoute, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
-        this.activatedRoute = activatedRoute;
-        this.magic = magic;
-        this.containerTaskService = containerTaskService;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-        this.componentRef = null;
-        this.parentMgSubformService = null;
-    }
-    ngOnInit() {
-        let outletname = this.activatedRoute.outlet;
-        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-        let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-        if (subformMagicService == null || subformMagicService.currentRouteDefinition === null) {
-            this.insertRouteEvent(currentActiveRoute);
-            SubformMagicService.routerContainers.push(this);
-        }
-        else {
-            this.initializeComponent();
-        }
-    }
-    insertRouteEvent(currentActiveRoute) {
-        let guiEvent = getGuiEventObj('RouterNavigate', null, 0);
-        guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
-        if (currentActiveRoute.snapshot.outlet !== 'primary')
-            guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
-        let calcRouterPath = currentActiveRoute.routeConfig.path;
-        if (calcRouterPath.length > 0) {
-            let routerPath = calcRouterPath;
-            let tokens = StrUtil.tokenize(routerPath, "/:");
-            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]]);
-            }
-        }
-        this.containerTaskService.insertEvent(guiEvent);
-    }
-    initializeComponent() {
-        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-        if (subformMagicService.currentRouteDefinition !== null) {
-            let comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
-            this.componentRef = this.viewContainerRef.createComponent(componentFactory);
-            Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
-            let myActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            let routeParams = StrUtil.tokenize(myActiveRoute.snapshot.routeConfig.path, "/:");
-            subformMagicService.routesDict[myActiveRoute.snapshot.outlet] = routeParams[0];
-            this.parentMgSubformService = subformMagicService;
-            subformMagicService.currentRouteDefinition = null;
-            SubformMagicService.currentCallerMgSubformServiceRef = null;
-            let ignoreParamChange = true;
-            myActiveRoute.paramMap.subscribe(params => {
-                if (!ignoreParamChange)
-                    this.insertRouteEvent(myActiveRoute);
-                ignoreParamChange = false;
-            });
-            this.parentMgSubformService.refreshView();
-            this.routerCommandsMagicService.ExecuteNextCommand();
-        }
-    }
-    ngOnDestroy() {
-        if (this.componentRef != null) {
-            this.componentRef.instance.task.close();
-            let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
-        }
-    }
-}
-RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(ɵɵdirectiveInject(ActivatedRoute), ɵɵ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, [{
-        type: Component,
-        args: [{
-                selector: 'magic-route-outlet',
-                template: `
-  `
-            }]
-    }], function () { return [{ type: ActivatedRoute }, { type: EngineMagicService }, { type: TaskMagicService }, { type: ComponentFactoryResolver }, { type: ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null); })();
-
 class Constants {
 }
 Constants.DATE_FMT = 'dd/MMM/yyyy';
@@ -3007,9 +3062,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)); };
+DateMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
+(function () { i0.ɵsetClassMetadata(DateMagicPipe, [{
         type: Pipe,
         args: [{
                 name: 'magicDate'
@@ -3277,11 +3332,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 () { i0.ɵsetClassMetadata(MgformatMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[mgFormat]'
@@ -3329,9 +3384,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)); };
+TimeMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
+(function () { i0.ɵsetClassMetadata(TimeMagicPipe, [{
         type: Pipe,
         args: [{
                 name: 'magicTime'
@@ -3369,15 +3424,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 () { i0.ɵsetClassMetadata(RangeValidatorMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[rangevalidator] ',
@@ -3389,13 +3444,13 @@ 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) {
@@ -3413,13 +3468,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 () { i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-subform',
@@ -3431,34 +3486,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;
@@ -3511,19 +3566,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, true);
     } 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);
+        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 () { i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
@@ -3537,7 +3592,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: [{
@@ -3556,11 +3611,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 () { i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3580,11 +3635,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 () { i0.ɵsetClassMetadata(ComboboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `select[magic]:not([multiple])`,
@@ -3600,30 +3655,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 () { 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) {
@@ -3728,28 +3783,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.ɵɵstaticViewQuery(_c0, true);
     } if (rf & 2) {
         var _t;
-        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
+        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, MagicViewContainerRef, i3.DynamicComponent, i3.DynamicIoDirective, i1.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 () { i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-root',
@@ -3805,7 +3860,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,
@@ -3828,11 +3883,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.ɵ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] });
+const ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
+(function () { i0.ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3853,11 +3908,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.ɵ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] });
+const ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
+(function () { i0.ɵsetClassMetadata(MagicDefaultValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3883,11 +3938,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 () { i0.ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -3907,11 +3962,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 () { i0.ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `input[magic]:([noFormControl]):not([type=checkbox]),
@@ -3953,17 +4008,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 () { 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: [{
@@ -4003,14 +4058,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 () { 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']
         }] }); })();
@@ -4059,8 +4114,8 @@ class MagicModule {
         };
     }
 }
-MagicModule.ɵmod = ɵɵdefineNgModule({ type: MagicModule });
-MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t) { return new (t || MagicModule)(); }, providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [[
+MagicModule.ɵmod = i0.ɵɵdefineNgModule({ type: MagicModule });
+MagicModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MagicModule_Factory(t) { return new (t || MagicModule)(); }, providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -4068,7 +4123,7 @@ MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t
             DynamicModule,
             HttpClientModule
         ]] });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
         CheckboxMagicDirective,
         CheckboxNoFormControlMagicDirective,
         InputNoFormControlMagicDirective,
@@ -4128,7 +4183,7 @@ MagicModule.ɵinj = ɵɵdefineInjector({ factory: function MagicModule_Factory(t
         NonMagicControlDirective,
         MagicFocusDirective,
         MagicViewContainerRef] }); })();
-(function () { ɵsetClassMetadata(MagicModule, [{
+(function () { i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
         args: [{
                 declarations: [...decs],
@@ -4237,11 +4292,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 () { 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 },