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

package/fesm2015/magic-xpa-angular.js

@@ -1,36 +1,36 @@
 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 } from '@magic-xpa/engine';
+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';
 
-/**
- * @ignore
- */
 class ControlMetadata {
     constructor() {
         this.properties = new Map();
         this.classesMap = new Map();
         this.stylesMap = new Map();
-        // user properties
         this.userProperties = new Map();
         this.customValidators = new Map();
     }
     setClass(key, value) {
-        // for no-control - hold the name of the class to be removed later
         if (this.classesMap.has(key)) {
             this.removedClass = this.classesMap.get(key);
         }
@@ -45,14 +45,9 @@ class ControlMetadata {
         this.stylesMap.set(key, value);
     }
 }
-/**
- * @ignore
- */
 class ControlsMetadata {
     constructor() {
-        //values of control
         this.values = new Map();
-        // dictionary of controls with there properties
         this.ControlsProperties = new Map();
         this.isCreated = false;
         this.isEditing = false;
@@ -66,8 +61,6 @@ class ControlsMetadata {
         return this.ControlsProperties.get(controlId);
     }
     update(obj) {
-        //should we keep the values here ?
-        //this.values = obj.ControlsValues;
         let props = obj.ControlsMetaData;
         for (let controlName in props) {
             if (!this.ControlsProperties.has(controlName))
@@ -96,16 +89,13 @@ class ControlsMetadata {
         return this.values.get(controlName);
     }
 }
-/**
- * @ignore
- */
 class Records {
     constructor() {
         this.data = new Map();
-        this.list = []; //used for sequential access in table
+        this.list = [];
         this.recordsBeforeCurrentView = 0;
         this.isEmptyDataView = false;
-        this.sizeUpdated = false; //used for evaluating the RecordsSizeChange.
+        this.sizeUpdated = false;
     }
     getRow(dvRowId) {
         return this.list[dvRowId + this.recordsBeforeCurrentView];
@@ -129,24 +119,14 @@ class Records {
         }
         return false;
     }
-    /*
-    * for row editing
-    * */
     startRowEditing(guiRowId) {
         if (guiRowId < this.list.length && this.data.has(guiRowId))
             this.data.get(guiRowId).isEditing = true;
     }
-    /*
-    * stop row editing on row Id
-    * */
     stopRowEditing(guiRowId) {
         if (guiRowId < this.list.length && this.data.has(guiRowId))
             this.data.get(guiRowId).isEditing = false;
     }
-    /*
-    * return if row is in editing
-    * Called by the HTML code, so parameter is a string, not a numebr
-    * */
     isRowInRowEditing(guiRowId) {
         if (+guiRowId < this.list.length) {
             if (!this.data.has(+guiRowId) || isNullOrUndefined(this.data.get(+guiRowId)))
@@ -175,7 +155,6 @@ class Records {
     updateSize(len) {
         if (this.list.length != len) {
             if (len < this.list.length) {
-                //remove rows
                 for (let i = len; i < this.list.length; i++) {
                     this.data.delete(i);
                 }
@@ -184,10 +163,6 @@ class Records {
             this.sizeUpdated = true;
         }
     }
-    /**
-     * crears data for the first record
-     * @param template
-     */
     clearFirstTableRecord(template) {
         if (this.list.length >= 1) {
             for (const key in template) {
@@ -218,9 +193,6 @@ class Records {
         return this.guiTopIndex;
     }
 }
-/**
- * @ignore
- */
 var HtmlClasses;
 (function (HtmlClasses) {
     HtmlClasses["Color"] = "color";
@@ -229,16 +201,11 @@ var HtmlClasses;
     HtmlClasses["HintColor"] = "hintcolor";
 })(HtmlClasses || (HtmlClasses = {}));
 
-/**
- * @ignore
- */
 class EngineMagicService {
     constructor() {
         this.magicBridge = MagicBridge;
         this.isStub = false;
-        // true when user is logged in magic
         this.isLoggedIn = false;
-        //TODO - unregister
         this.refreshDom = new Subject();
         this.interactiveCommands = new Subject();
     }
@@ -281,6 +248,9 @@ class EngineMagicService {
     GetControlPictureMask(taskId, controlName) {
         return this.magicBridge.GetControlPictureMask(taskId, controlName);
     }
+    GetFormattedValue(taskId, controlName, value) {
+        return this.magicBridge.GetFormattedValue(taskId, controlName, value);
+    }
     ValidateControlValue(taskId, controlName, value) {
         return this.magicBridge.ValidateControlValue(taskId, controlName, value);
     }
@@ -288,7 +258,6 @@ class EngineMagicService {
         return this.magicBridge.GetFldRanges(taskId, controlName);
     }
     saveData(data) {
-        //this.magicBridge.saveData(data);
     }
     getIsLoggedIn() {
         return this.isLoggedIn;
@@ -303,24 +272,15 @@ class EngineMagicService {
         this.magicBridge.TerminateContextUsingFetchAPI();
     }
 }
-/** @nocollapse */ EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
-/** @nocollapse */ EngineMagicService.ɵprov = ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(EngineMagicService, [{
+EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
+EngineMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
+(function () { i0.ɵsetClassMetadata(EngineMagicService, [{
         type: Injectable
     }], null, null); })();
 
-/**
- * Manages the list of components in a project, and the project title
- */
 class ComponentListMagicService {
     constructor() {
-        /**
-         * Map of project components
-         */
         this.components = new Map();
-        /**
-         * Map of project dialogs
-         */
         this.dialogs = new Map();
         this.lazyLoadModulesMap = null;
     }
@@ -334,11 +294,6 @@ class ComponentListMagicService {
             data = this.components.get(name);
         return data;
     }
-    /**
-     * Return a component according to name
-     * @param name Name of requested component
-     * @returns The requested component
-     */
     getComponent(name, mustHaveData = true) {
         let data = this.getData(name, mustHaveData);
         return data ? data.component : null;
@@ -349,29 +304,16 @@ class ComponentListMagicService {
             this.components.set(key, data);
         }
     }
-    /**
-    * Return a component according to name
-    * @param name Name of requested component
-    * @returns The requested component
-    */
     getModuleRef(name) {
         let data = this.getData(name, false);
         return data ? data.moduleRef : null;
         ;
     }
-    /**
-     * Return the lazy load module details of the specified component
-     * @param name: Name of requested component
-     * @returns: lazy load module details
-     */
     getLazyLoadModuleData(name) {
         return (this.lazyLoadModulesMap != null && this.lazyLoadModulesMap.hasOwnProperty(name)) ? this.lazyLoadModulesMap[name] : null;
     }
 }
 
-/**
- * @ignore
- */
 class StylesMapManager {
     static magicValueGetStyle(styleName, magicValue) {
         let style = "";
@@ -398,12 +340,326 @@ StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
     [MagicProperties.Wallpaper, "background-image"]
 ]);
 
-/**
- * @ignore
- */
+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() {
-        // Sets the currentContextID
         try {
             switch (this.command._commandType) {
                 case InteractiveCommandType.GET_VALUE:
@@ -430,11 +686,13 @@ class GuiInteractiveExecutor {
                 case InteractiveCommandType.REFRESH_PAGE:
                     this.OnRefreshPage();
                     break;
+                case InteractiveCommandType.GET_LAST_ROUTE:
+                    this.OnGetLastRoute();
+                    break;
             }
         }
         catch (ex) {
             throw ex;
-            //want to see all the exceptions for now
         }
     }
     static executeInteractiveCommand(task, guiIntactiveCommand, overlayService) {
@@ -490,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 {
@@ -511,80 +772,56 @@ BaseMagicOverlayContainer = __decorate([
     Output()
 ], BaseMagicOverlayContainer);
 
-/**
- * Directive for setting  ViewContainerRef on element
- */
 class MagicViewContainerRef {
     constructor(vcRef, resolver) {
         this.vcRef = vcRef;
         this.resolver = resolver;
-        // For angular 10 -  find the component from the views
         let comp = (this.vcRef._hostView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
         comp.setViewContainerRef(vcRef);
     }
 }
-/** @nocollapse */ MagicViewContainerRef.ɵfac = function MagicViewContainerRef_Factory(t) { return new (t || MagicViewContainerRef)(ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(ComponentFactoryResolver)); };
-/** @nocollapse */ MagicViewContainerRef.ɵdir = ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]] });
-/*@__PURE__*/ (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(), " ");
 } }
-/**
- * Creates a modal window for Magic modal window components
- */
 class MagicOverlayContainer extends BaseMagicOverlayContainer {
-    /**
-     *
-     * @param injector
-     * @param componentFactoryResolver
-     */
     constructor(injector, componentFactoryResolver) {
         super();
         this.injector = injector;
         this.componentFactoryResolver = componentFactoryResolver;
-        /**
-         *
-         */
         this.ModalComp = null;
-        /**
-         *
-         */
         this.ModalCompParameters = {};
         this.onClose = new EventEmitter();
-        /**
-         *
-         */
         this.componentRef = null;
     }
-    /**
-     *
-     */
     ngOnInit() {
         const factory = this.componentFactoryResolver.resolveComponentFactory(this.ModalComp);
         this.componentRef = this.modalbodyViewContainerRef.createComponent(factory);
@@ -593,10 +830,6 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     setViewContainerRef(vcRef) {
         this.modalbodyViewContainerRef = vcRef;
     }
-    /**
-     * Returns the form name
-     * @returns
-     */
     getText() {
         if (this.componentRef !== null) {
             let comp = this.componentRef.instance;
@@ -605,10 +838,6 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         else
             return "";
     }
-    /**
-     * Returns CSS styles for the window
-     * @returns
-     */
     getStyle() {
         let styles = {};
         if (this.componentRef != undefined) {
@@ -625,10 +854,6 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         }
         return styles;
     }
-    /**
-     * Returns the CSS styles for the client area
-     * @returns
-     */
     getClientAreaStyles() {
         let styles = {};
         if (this.componentRef != undefined) {
@@ -644,63 +869,53 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         }
         return styles;
     }
-    /**
-     * Should the title bar be displayed
-     * @returns
-     */
     getShowTitleBar() {
         if (this.componentRef != undefined) {
             let comp = this.componentRef.instance;
             return comp.ShowTitleBar();
         }
     }
-    /**
-     *
-     */
     OnClose() {
         this.onClose.emit();
     }
-    /**
-     * Handles click in the background window
-     */
     OnBackgroundClick() {
         let comp = this.componentRef.instance;
         if (comp.ShouldCloseOnBackgroundClick())
             this.OnClose();
     }
 }
-/** @nocollapse */ MagicOverlayContainer.ɵfac = function MagicOverlayContainer_Factory(t) { return new (t || MagicOverlayContainer)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ComponentFactoryResolver)); };
-/** @nocollapse */ 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}"] });
-/*@__PURE__*/ (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',
@@ -723,7 +938,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
   `,
                 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: [{
@@ -737,44 +952,28 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: Output
         }] }); })();
 
-/**
- * Service managing overlay windows
- * This is Magic's default provider
- */
 class OverlayContainerMagicProvider {
     getComponent() {
         return MagicOverlayContainer;
     }
 }
-/** @nocollapse */ OverlayContainerMagicProvider.ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
-/** @nocollapse */ OverlayContainerMagicProvider.ɵprov = ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(OverlayContainerMagicProvider, [{
+OverlayContainerMagicProvider.ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
+OverlayContainerMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
+(function () { i0.ɵsetClassMetadata(OverlayContainerMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
-/**
- * This is a base class for the magic confirm components
- */
 class BaseMagicConfirmComponent {
     constructor() {
-        /**
-         * onClose Event - to be raised when the component is closed
-         * should pass true when OK is pressed and false when cancel is pressed
-         */
         this.onClose = new EventEmitter();
     }
-    /**
-     * raises close Event
-     * @param result true when OK is pressed and false when cancel is pressed
-     *
-     */
     OnClose(result) {
         this.onClose.emit(result);
     }
 }
-/** @nocollapse */ BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-/** @nocollapse */ 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: [""] });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(BaseMagicConfirmComponent, [{
+BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
+BaseMagicConfirmComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, styles: [""] });
+(function () { i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -789,27 +988,17 @@ class BaseMagicConfirmComponent {
             type: Output
         }] }); })();
 
-/**
- * This is a base class for the magic alert components
- */
 class BaseMagicAlertComponent {
     constructor() {
-        /**
-         * onClose Event - to be raised when the component is closed
-      
-         */
         this.onClose = new EventEmitter();
     }
-    /**
-     * close magic alert
-     */
     OnClose() {
         this.onClose.emit();
     }
 }
-/** @nocollapse */ BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-/** @nocollapse */ 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: [""] });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(BaseMagicAlertComponent, [{
+BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
+BaseMagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, styles: [""] });
+(function () { i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
         args: [{
                 selector: 'mg-base-alert',
@@ -824,9 +1013,6 @@ class BaseMagicAlertComponent {
             type: Output
         }] }); })();
 
-/**
- * Directive for setting focus on element
- */
 class MagicFocusDirective {
     constructor(hostElement) {
         this.hostElement = hostElement;
@@ -835,40 +1021,27 @@ class MagicFocusDirective {
         this.hostElement.nativeElement.focus();
     }
 }
-/** @nocollapse */ MagicFocusDirective.ɵfac = function MagicFocusDirective_Factory(t) { return new (t || MagicFocusDirective)(ɵɵdirectiveInject(ElementRef)); };
-/** @nocollapse */ MagicFocusDirective.ɵdir = ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]] });
-/*@__PURE__*/ (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 {
-    /**
-     *
-     * @param componentFactoryResolver
-     */
     constructor(componentListMagicService, loader, injector, componentFactoryResolver, changeDetectorRef) {
         this.componentListMagicService = componentListMagicService;
         this.loader = loader;
         this.injector = injector;
         this.componentFactoryResolver = componentFactoryResolver;
         this.changeDetectorRef = changeDetectorRef;
-        /**
-         *
-         */
         this.Component = null;
-        /**
-         *
-         */
         this.Parameters = {};
         this.onClose = new EventEmitter();
     }
-    /**
-     *
-     */
     ngOnInit() {
         let moduleRef = this.componentListMagicService.getModuleRef(this.Parameters.MagicFormName);
         if (moduleRef == null) {
@@ -918,31 +1091,27 @@ class MagicOverlayContainerWrapper {
         this.changeDetectorRef.detectChanges();
     }
 }
-/**
- * @ignore
- * contais data of allowed base components to use
- */
 MagicOverlayContainerWrapper.allowedBaseComps = new Map([
     [OverlayType.Overlay, { comp: BaseMagicOverlayContainer, error: 'BaseMagicOverlayContainer . Overlay ' }],
     [OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
     [OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
 ]);
-/** @nocollapse */ MagicOverlayContainerWrapper.ɵfac = function MagicOverlayContainerWrapper_Factory(t) { return new (t || MagicOverlayContainerWrapper)(ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(NgModuleFactoryLoader), ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(ChangeDetectorRef)); };
-/** @nocollapse */ 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    }"] });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
+(function () { i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
         type: Component,
         args: [{
                 selector: 'app-magic-overlay-container-wrapper',
@@ -968,7 +1137,7 @@ MagicOverlayContainerWrapper.allowedBaseComps = new Map([
     }
   `]
             }]
-    }], 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
@@ -981,35 +1150,32 @@ MagicOverlayContainerWrapper.allowedBaseComps = new Map([
             args: ['overlayContainerWrapper', { static: true }]
         }] }); })();
 
-/***
- * This is sample component for the alert message
- */
 class MagicAlertComponent extends BaseMagicAlertComponent {
 }
-/** @nocollapse */ MagicAlertComponent.ɵfac = function MagicAlertComponent_Factory(t) { return ɵMagicAlertComponent_BaseFactory(t || MagicAlertComponent); };
-/** @nocollapse */ MagicAlertComponent.ɵcmp = ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], features: [ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelementStart(1, "div", 0);
-        ɵɵelementStart(2, "h2");
-        ɵɵtext(3);
-        ɵɵelementEnd();
-        ɵɵelementStart(4, "p");
-        ɵɵtext(5);
-        ɵɵelementEnd();
-        ɵɵelementStart(6, "button", 1);
-        ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
-        ɵɵtext(7, "OK");
-        ɵɵelementEnd();
-        ɵɵelementEnd();
-        ɵɵelementEnd();
+MagicAlertComponent.ɵfac = function MagicAlertComponent_Factory(t) { return ɵMagicAlertComponent_BaseFactory(t || MagicAlertComponent); };
+MagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "div", 0);
+        i0.ɵɵelementStart(2, "h2");
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "p");
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "button", 1);
+        i0.ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
+        i0.ɵɵtext(7, "OK");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵadvance(3);
-        ɵɵtextInterpolate1(" ", ctx.title, "");
-        ɵɵadvance(2);
-        ɵɵtextInterpolate1("", ctx.message, " ");
+        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 = /*@__PURE__*/ ɵɵgetInheritedFactory(MagicAlertComponent);
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicAlertComponent, [{
+const ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent);
+(function () { i0.ɵsetClassMetadata(MagicAlertComponent, [{
         type: Component,
         args: [{
                 selector: 'sample-magic-alert-component',
@@ -1053,39 +1219,36 @@ const ɵMagicAlertComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFactory(
             }]
     }], null, null); })();
 
-/***
- * This is sample component for the confirmation box
- */
 class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
 }
-/** @nocollapse */ MagicConfirmationBoxComponent.ɵfac = function MagicConfirmationBoxComponent_Factory(t) { return ɵMagicConfirmationBoxComponent_BaseFactory(t || MagicConfirmationBoxComponent); };
-/** @nocollapse */ MagicConfirmationBoxComponent.ɵcmp = ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], features: [ɵɵInheritDefinitionFeature], decls: 11, vars: 2, consts: [[1, "mg-message-background"], [3, "click"], [1, "cancel", 3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "div");
-        ɵɵelementStart(1, "div", 0);
-        ɵɵelementStart(2, "h2");
-        ɵɵtext(3);
-        ɵɵelementEnd();
-        ɵɵtext(4);
-        ɵɵelement(5, "br");
-        ɵɵelement(6, "br");
-        ɵɵelementStart(7, "button", 1);
-        ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_7_listener() { return ctx.OnClose(true); });
-        ɵɵtext(8, "OK");
-        ɵɵelementEnd();
-        ɵɵelementStart(9, "button", 2);
-        ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_9_listener() { return ctx.OnClose(false); });
-        ɵɵtext(10, "Cancel");
-        ɵɵelementEnd();
-        ɵɵelementEnd();
-        ɵɵelementEnd();
+MagicConfirmationBoxComponent.ɵfac = function MagicConfirmationBoxComponent_Factory(t) { return ɵMagicConfirmationBoxComponent_BaseFactory(t || MagicConfirmationBoxComponent); };
+MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 2, consts: [[1, "mg-message-background"], [3, "click"], [1, "cancel", 3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "div", 0);
+        i0.ɵɵelementStart(2, "h2");
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtext(4);
+        i0.ɵɵelement(5, "br");
+        i0.ɵɵelement(6, "br");
+        i0.ɵɵelementStart(7, "button", 1);
+        i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_7_listener() { return ctx.OnClose(true); });
+        i0.ɵɵtext(8, "OK");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "button", 2);
+        i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_9_listener() { return ctx.OnClose(false); });
+        i0.ɵɵtext(10, "Cancel");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵadvance(3);
-        ɵɵtextInterpolate1(" ", ctx.title, "");
-        ɵɵadvance(1);
-        ɵɵtextInterpolate1(" ", ctx.message, " ");
+        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 = /*@__PURE__*/ ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
+const ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
+(function () { i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
         type: Component,
         args: [{
                 selector: 'sample-magic-confirmation-box',
@@ -1136,52 +1299,25 @@ const ɵMagicConfirmationBoxComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInherit
             }]
     }], null, null); })();
 
-/**
- * Service managing overlay windows
- * This is Magic's default provider
- */
-/**
- * Service managing alert and confirmation windows
- * This is Magic's default provider
- */
 class ConfirmationComponentsMagicProvider {
-    /**
-     * Return true when use default javascript alert and confirmation or return false to provide custom components
-     *  @returns true is we want to use default javascript alert and confirmation
-     */
     showDefaultConfirmations() {
         return true;
     }
-    /**
-     * Returns component that will replace javascript alert. The component will be used only if showDefaultConfirmations = false
-     *  @returns component that will replace javascript Alert
-     */
     getAlertComponent() {
         return MagicAlertComponent;
     }
-    /**
-     * Returns component that will replace javascript confirmation box. The component will be used only if showDefaultConfirmations = false
-     *  @returns component that will replace javascript confirmation box
-     */
     getConfirmtionComponent() {
         return MagicConfirmationBoxComponent;
     }
 }
-/** @nocollapse */ ConfirmationComponentsMagicProvider.ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
-/** @nocollapse */ ConfirmationComponentsMagicProvider.ɵprov = ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
+ConfirmationComponentsMagicProvider.ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
+ConfirmationComponentsMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
+(function () { i0.ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
-/**
- * Displays a message-box
- */
 class confirmationBox {
-    /**
-     * @ignore
-     */
     static isConfirmBox(style) {
-        // button format mask is in first nibble from right
         let buttonMode = style & 0x0F;
         var isConfirm = (buttonMode === Styles.MSGBOX_BUTTON_OK_CANCEL) ||
             (buttonMode === Styles.MSGBOX_BUTTON_ABORT_RETRY_IGNORE) ||
@@ -1190,14 +1326,7 @@ class confirmationBox {
             (buttonMode === Styles.MSGBOX_BUTTON_RETRY_CANCEL);
         return (isConfirm);
     }
-    /**
-     * Converts the result from the HTML window to the expected result type
-     * @param style Result received from HTML window
-     * @param okWasPressed Was the "OK" pressed
-     * @returns  MessageBox result type
-     */
     static convertToExcpectedResultBox(style, okWasPressed) {
-        // button format mask is in first nibble from right
         let buttonMode = style & 0x0F;
         let retValue = Styles.MSGBOX_RESULT_OK;
         if (buttonMode === Styles.MSGBOX_BUTTON_OK)
@@ -1214,19 +1343,10 @@ class confirmationBox {
             retValue = okWasPressed ? Styles.MSGBOX_RESULT_RETRY : Styles.MSGBOX_RESULT_CANCEL;
         return retValue;
     }
-    /**
-     * Show a message box as an HTML window
-     * @param title Title of the message box
-     * @param message Message that will be display in the message box
-     * @param style Style that include buttons \ Icons
-     * @returns MessageBox result
-     */
     static showConfirmationBox(title, message, style) {
         let okWasPressed = false;
         let retValue = Styles.MSGBOX_RESULT_OK;
-        // check if it is confirmation box
         let isConfirm = this.isConfirmBox(style);
-        // the title will be added to the string and we will add new line after the title
         let titleAndString = title + '\n' + '\n' + message;
         if (isConfirm)
             okWasPressed = confirm(titleAndString);
@@ -1234,14 +1354,10 @@ class confirmationBox {
             alert(titleAndString);
             okWasPressed = true;
         }
-        // return the result from the user
         return okWasPressed;
     }
 }
 
-/**
- * Service managing overlay windows
- */
 class OverlayWindowService {
     constructor(componentFactoryResolver, componentList, engineMagicService, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
         this.componentFactoryResolver = componentFactoryResolver;
@@ -1256,7 +1372,6 @@ class OverlayWindowService {
         this.overlayWindowFocusManager = new OverlayWindowFocusManager(rootMagicElement);
     }
     open(formName, taskId, taskDescription) {
-        // for overlay which are lazy loaded don't find data in component-list
         let comp = this.componentList.lazyLoadModulesMap != null && this.componentList.lazyLoadModulesMap.hasOwnProperty(formName) ? null : this.componentList.getComponent(formName);
         let parameters = { taskIdParam: taskId, taskDescription: taskDescription };
         let componentRef = this.createModalComponent({ MagicFormName: formName, ModalComp: comp, ModalCompParameters: parameters }, this.overlayContainerMagicProvider.getComponent(), OverlayType.Overlay);
@@ -1267,27 +1382,18 @@ class OverlayWindowService {
         });
     }
     close(commandStr) {
-        // Close the overlay by removing the overlay window from its container
         this.overlayWindowsContainerViewRef.remove();
         this.overlayWindowFocusManager.popDialog();
         let guiEvent1 = getGuiEventObj("dispose", null, 0);
         guiEvent1.TaskID = commandStr;
         this.engineMagicService.insertEvent(guiEvent1);
     }
-    /**
-     * Open Confirmation box
-     * @param title title of the box
-     * @param msg message
-     * @param style Magic style
-     */
     openConfirmationBox(title, msg, style) {
-        //show default confirmations
         if (this.confirmationComponentsMagicProvider.showDefaultConfirmations()) {
             let res = confirmationBox.showConfirmationBox(title, msg, style);
             this.finishConfirmation(style, res);
         }
         else {
-            //show custom confirmations
             let comp = confirmationBox.isConfirmBox(style) ? this.confirmationComponentsMagicProvider.getConfirmtionComponent() : this.confirmationComponentsMagicProvider.getAlertComponent();
             let overlayType = confirmationBox.isConfirmBox(style) ? OverlayType.ConfirmationBox : OverlayType.Alert;
             let componentRef = this.createModalComponent({ title: title, message: msg }, comp, overlayType);
@@ -1298,21 +1404,11 @@ class OverlayWindowService {
             });
         }
     }
-    /**
-     * This method is called on close of the confirmation
-     * @param style Magic style
-     * @param result
-     */
     finishConfirmation(style, result) {
         let guiEvent = getGuiEventObj("confirmationClosed", null, 0);
         guiEvent.keyCode = confirmationBox.convertToExcpectedResultBox(style, result);
         this.engineMagicService.insertEvent(guiEvent);
     }
-    /**
-     * creates a modal component. Can be used for overlay, message box or confirmation box
-     * @param parameters component's parameters
-     * @param component components to create
-     */
     createModalComponent(parameters, component, overlayType) {
         let componentRef;
         let magicModalContainerParameters = {
@@ -1320,22 +1416,20 @@ class OverlayWindowService {
             Parameters: parameters,
             OverlayTypeParam: overlayType
         };
-        // Create the UI component of modal window
         const factory = this.componentFactoryResolver.resolveComponentFactory(MagicOverlayContainerWrapper);
         let viewCRef = this.overlayWindowsContainerViewRef;
         componentRef = viewCRef.createComponent(factory);
-        // Set the data to newly created component
         Object.assign(componentRef.instance, magicModalContainerParameters);
         this.overlayWindowFocusManager.pushDialog(componentRef.instance.GetRootElement());
         componentRef.instance.DetectChanges();
         return componentRef;
     }
 }
-/** @nocollapse */ OverlayWindowService.ɵfac = function OverlayWindowService_Factory(t) { return new (t || OverlayWindowService)(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ComponentListMagicService), ɵɵinject(EngineMagicService), ɵɵinject(OverlayContainerMagicProvider), ɵɵinject(ConfirmationComponentsMagicProvider)); };
-/** @nocollapse */ OverlayWindowService.ɵprov = ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac });
-/*@__PURE__*/ (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;
@@ -1454,95 +1548,37 @@ class DialogInfo {
     }
 }
 
-/**
- * Main service to connect the UI with the Magic WebCLient
- */
 class TaskMagicService {
-    /**
-     *
-     * @param  magic
-     */
     constructor(magic, overlayWindowService) {
         this.magic = magic;
         this.overlayWindowService = overlayWindowService;
-        /**
-         * Collection of data for all controls
-         */
         this.Records = new Records();
-        /**
-         * FormGroup collection for line mode
-         */
         this.formGroups = [];
-        /**
-         * @ignore
-         */
         this.refreshDom = new Subject();
-        /**
-         * @ignore
-         */
         this.detectChanges = new Subject();
-        /**
-         * @ignore
-         */
         this.interactiveCommands = new Subject();
-        /**
-         * @ignore
-         * This event is emitted when the selected row in a table changes.
-         */
         this.OnSelectedRowChanged = new EventEmitter();
-        /**
-         * @ignore
-         */
         this.customPropertiesSubject = new Subject();
-        /**
-         * @ignore
-         */
         this.recordsCountChangeSubject = new Subject();
-        /**
-         * @ignore
-         */
         this.oldPageSize = 0;
         this.Records.setGuiTopIndex(0);
         this.mgInputDateFormat = null;
     }
-    /**
-    * returns true if used is logged in
-    * @returns
-    */
     getIsLoggenIn() {
         return this.magic.getIsLoggedIn();
     }
-    /**
-     * returns the task Id
-     * @returns
-     */
     get taskId() {
         return this._taskId;
     }
-    /**
-     * Sets the task Id
-     * @param value the task id to set
-     */
     set taskId(value) {
-        // debugger;
         this._taskId = value;
     }
-    /**
-     * Returns the task's data in Screen mode
-     * @returns
-     */
     get ScreenControlsData() {
         return this.Records.list['0'];
     }
-    /**
-     * @ignore
-     */
     settemplate(value) {
         this.template = value;
     }
-    /**
-     * Builds the FormControl for each and every control
-     */
     buildScreenModeControls() {
         const group = new FormGroup({});
         for (const key in this.template) {
@@ -1554,21 +1590,10 @@ class TaskMagicService {
         }
         this.ScreenModeControls = group;
     }
-    /**
-     * Is the control a table control
-     * @param id Id of the control
-     * @returns
-     */
     isTableControl(id) {
         return this.template[id] == '1';
     }
     getMgInputDateFormat() { return this.mgInputDateFormat; }
-    /**
-     * Returns the FormControl of a control
-     * @param guiRowid Id of the requested row
-     * @param id Id of the control
-     * @returns
-     */
     getFormControl(guiRowid, id) {
         let c;
         let group = this.isTableControl(id) ? this.formGroups[guiRowid] : this.ScreenModeControls;
@@ -1578,21 +1603,12 @@ class TaskMagicService {
         }
         return c;
     }
-    /**
-     * handle the change of text for input control inside table
-     * @param  guiRowId Id of the row for which the FormControls are built
-     * set the new value of the formcontrol
-     */
     setInputTextValue(controlId, guiRowid, val) {
         this.setValue(controlId, guiRowid, this.ConvertValToNative(controlId, 0, val));
         const fc = this.getFormControl(guiRowid, controlId);
         if (!isNullOrUndefined(val))
             fc.setValue(val);
     }
-    /**
-     * Build the FormControls for a table row
-     * @param  guiRowId Id of the row for which the FormControls are built
-     */
     buildTableRowControls(guiRowId) {
         const group = new FormGroup({});
         for (const key in this.template) {
@@ -1604,58 +1620,30 @@ class TaskMagicService {
         }
         this.formGroups[guiRowId] = group;
     }
-    /**
-     *
-     * @ignore
-     */
     updateRecordsBeforeCurrentView(value) {
         this.Records.recordsBeforeCurrentView = value;
     }
-    /**
-     * @ignore
-     */
     setIncludesFirst(value) {
         this.Records.includesFirst = value;
     }
-    /**
-     * @ignore
-     */
     setIncludesLast(value) {
         this.Records.includesLast = value;
     }
-    /**
-     * @ignore
-     */
     markRowAsCreated(guiRowId) {
         this.Records.markRowAsCreated(guiRowId);
     }
-    /**
-     * @ignore
-     */
     markRowAsNotCreated(guiRowId) {
         this.Records.markRowAsNotCreated(guiRowId);
     }
-    /**
-     * @ignore
-     */
     startRowEditing(guiRowId) {
         this.Records.startRowEditing(guiRowId);
     }
-    /**
-     * @ignore
-     */
     stopRowEditing(guiRowId) {
         this.Records.stopRowEditing(guiRowId);
     }
-    /**
-     * @ignore
-     */
     isRowInRowEditing(guiRowId) {
         return this.Records.isRowInRowEditing(guiRowId);
     }
-    /**
-     * @ignore
-     */
     setIsEmptyDataView(isEmpty) {
         if (this.Records.isEmptyDataView !== isEmpty) {
             if (isEmpty)
@@ -1665,11 +1653,6 @@ class TaskMagicService {
             this.refreshView();
         }
     }
-    /**
-     * Initialize the service to work with the task
-     * @param taskId Id of the task
-     * @param taskDescription
-     */
     initTask(taskId, taskDescription) {
         this.Records.createFirst();
         this.oldPageSize = 0;
@@ -1681,71 +1664,39 @@ class TaskMagicService {
             this.settemplate(taskDescription);
         }
         this.buildScreenModeControls();
-        // remove previous subscriptions
         if (!isNullOrUndefined(this.subscribeRefreshDom))
             this.subscribeRefreshDom.unsubscribe();
         if (!isNullOrUndefined(this.subscribeInteractiveCommands))
             this.subscribeInteractiveCommands.unsubscribe();
         this.subscribeRefreshDom = this.magic.refreshDom.pipe(filter(command => command.TaskTag === this.taskId))
             .subscribe(command => {
-            // console.log("Task " + command.TaskTag + "command " + command.CommandType);
             this.executeCommand(command);
         });
         this.subscribeInteractiveCommands = this.magic.interactiveCommands
             .pipe(filter(command => command.TaskTag === this.taskId))
             .subscribe(command => {
-            // console.log("Task " + command.TaskTag + "command " + command.CommandType);
             this.executeInteractiveCommand(command);
         });
     }
-    /**
-     * @ignore
-     */
     refreshView() {
         this.detectChanges.next('');
     }
-    /**
-     * Insert an event to the Magic WebClient event queue
-     * @param guiEvent The event to insert
-     */
     insertEvent(guiEvent) {
         guiEvent.TaskID = this.taskId;
         this.magic.insertEvent(guiEvent);
     }
-    /**
-     * @ignore
-     */
     GetControlPictureMask(controlName) {
         return this.magic.GetControlPictureMask(this.taskId, controlName);
     }
-    /**
-     * Validates the control value, using the Magic WebClient
-     * @param controlName Id of validated control
-     * @param value value to be validated
-     * @returns If validation fails, returns error message, else returns null
-     */
     ValidateControlValue(controlName, value) {
         return this.magic.ValidateControlValue(this.taskId, controlName, value);
     }
-    /**
-     * @ignore
-     */
     GetRangedValue(controlName, value) {
         return this.magic.GetRangedValue(this.taskId, controlName, value);
     }
-    /**
-     * @ignore
-     */
     GetFldRanges(controlName) {
         return this.magic.GetFldRanges(this.taskId, controlName);
     }
-    /**
-     * returns the value of a property of the control
-     * @param controlId Id of control
-     * @param prop Property
-     * @param guiRowId Row Id, if applicable
-     * @returns Property value
-     */
     getProperty(controlId, prop, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
@@ -1759,9 +1710,6 @@ class TaskMagicService {
                 return this.Records.list[guiRowId].getProperty(controlId, prop);
         }
     }
-    /**
-     * @ignore
-     */
     getPropertyStub(ControlsProperties, controlId, prop) {
         ControlsProperties = ControlsProperties.ControlsProperties;
         if (controlId in ControlsProperties) {
@@ -1771,31 +1719,15 @@ class TaskMagicService {
         }
         return '';
     }
-    /**
-     * @ignore
-     */
     getStyleStub(ControlsProperties, controlId, styleName) {
         ControlsProperties = ControlsProperties.ControlsProperties;
         return ControlsProperties[controlId].stylesMap.get(styleName);
     }
-    /**
-     * Return the CSS classes used for this control
-     * @param controlId Id of control
-     * @param guiRowId Row Id, if applicable
-     * @returns String containing the classes currently defined for this control
-     */
     getClasses(controlId, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
         return this.Records.list[guiRowId].getControlMetadata(controlId).classes;
     }
-    /**
-     * Return the value of a style used for a control
-     * @param controlId Id of control
-     * @param styleName Name of style
-     * @param guiRowId Row Id, if applicable
-     * @returns value of style of the control
-     */
     getStyle(controlId, styleName, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
@@ -1806,36 +1738,21 @@ class TaskMagicService {
             return StylesMapManager.magicValueGetStyle(styleName, magicValue);
         }
     }
-    /**
-     * Return the value of a control
-     * @param controlId Id of control
-     * @param guiRowId Row Id, if applicable
-     * @returns value of the control
-     */
     getValue(controlId, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
         return this.Records.list.length > +guiRowId ? this.Records.list[guiRowId].values[controlId] : '';
     }
-    /**
-     * Sets the value of a control
-     * @param controlId Id of control
-     * @param guiRowId Row Id, if applicable
-     * @param value Value to set
-     */
+    getFormattedValue(controlName, val) {
+        return this.magic.GetFormattedValue(this.taskId, controlName, val);
+    }
     setValue(controlId, guiRowId, value) {
         return this.Records.list[guiRowId].setValue(controlId, value);
     }
-    /**
-     * @ignore
-     */
     executeInteractiveCommand(guiInteractiveCommand) {
         GuiInteractiveExecutor.executeInteractiveCommand(this, guiInteractiveCommand, this.overlayWindowService);
         this.interactiveCommands.next(guiInteractiveCommand);
     }
-    /**
-     * @ignore
-     */
     handleSetProperty(command, isTableChild) {
         let controlId = command.CtrlName;
         let dvRowId = (command.line || 0);
@@ -1872,7 +1789,6 @@ class TaskMagicService {
         let controlId = command.CtrlName;
         let properties;
         let isTableChild = this.isTableControl(controlId);
-        // For non-input type controls on table.
         if (command.obj !== null)
             isTableChild = isTableChild || command.obj.IsTableChild;
         guiRowId = this.getGuiRowId(dvRowId, isTableChild);
@@ -1923,13 +1839,13 @@ class TaskMagicService {
                 break;
             case CommandType.SET_PROPERTY:
                 this.handleSetProperty(command, isTableChild);
+                if (command.Operation == HtmlProperties.ReadOnly)
+                    this.refreshDom.next(command);
                 break;
             case CommandType.PROP_SET_USER_PROPERTY:
                 properties = this.Records.list[guiRowId].getControlMetadata(controlId);
-                // if the property has changed, set the property and raise the subject
                 if (properties.userProperties.get(command.Operation) !== command.obj1) {
                     properties.userProperties.set(command.Operation, command.obj1);
-                    // the property name is of format <controlName>~<propertyName>
                     this.customPropertiesSubject.next({ propertyName: controlId + '~' + command.Operation, value: command.obj1, rowId: guiRowId });
                 }
                 break;
@@ -1943,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;
@@ -1955,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:
@@ -1974,12 +1891,11 @@ class TaskMagicService {
             case CommandType.SET_EMPTY_DATAVIEW:
                 this.setIsEmptyDataView(command.Bool1);
                 break;
+            case CommandType.SET_FOCUS:
+                this.refreshDom.next(command);
+                break;
         }
-        this.refreshDom.next(command);
     }
-    /**
-    custom validator
-    */
     customValidator(rowid, id) {
         return (control) => {
             let controlMetadata;
@@ -1993,13 +1909,6 @@ class TaskMagicService {
             return null;
         };
     }
-    /**
-     * COnvert a value from Magic format to native format
-     * @param controlId Id of control
-     * @param  rowId Row Id, if applicable
-     * @param val Value to convert
-     * @returns Converted value
-     */
     ConvertValToNative(controlId, rowId, val) {
         let properties;
         properties = this.Records.list[0].getControlMetadata(controlId);
@@ -2048,13 +1957,6 @@ class TaskMagicService {
                 return val;
         }
     }
-    /**
-     * Convert a value from native to Magic format
-     * @param controlId Id of control
-     * @param  rowId Row Id, if applicable
-     * @param val Value to convert
-     * @returns Converted value
-     */
     ConvertValFromNative(controlId, rowId, val) {
         let properties;
         properties = this.Records.list[0].getControlMetadata(controlId);
@@ -2097,22 +1999,12 @@ class TaskMagicService {
                 return val;
         }
     }
-    /**
-     * Handle resize and also fetch chunk of records if having an empty view.
-     * @ignore
-     * @param pageSize : PageSize
-     * @param topGuiRowId : GuiRowId of first record in view.
-     */
     resize(pageSize, topGuiRowId) {
         let guiEvent = getGuiEventObj('resize', 'table', 0);
         guiEvent.PageSize = pageSize;
-        //As 'getRows' event also gets executed, set the guiEvent.Line parameter.
         guiEvent.Line = topGuiRowId;
         this.insertEvent(guiEvent);
     }
-    /**
-     * Fetches data for new table rows when scrolling done
-     */
     onScrollDown() {
         if (!this.Records.includesLast) {
             let guiEvent = getGuiEventObj('getRows', 'table', 0);
@@ -2120,29 +2012,15 @@ class TaskMagicService {
             this.insertEvent(guiEvent);
         }
     }
-    /**
-     * Sets the new browser window title
-     * @param newTitle New window title
-     */
     setTitle(newTitle) {
         this.mgTitleService.setTitle(newTitle);
     }
-    /**
-     * @ignore
-     */
     getGuiRowId(dvRowId, isTableControl) {
         return (isTableControl ? dvRowId + this.Records.recordsBeforeCurrentView : 0);
     }
-    /**
-     *
-     * @ignore
-     */
     getDvRowId(guiRowId) {
         return (guiRowId - this.Records.recordsBeforeCurrentView);
     }
-    /**
-     * Clean up the service when it is no longer needed
-     */
     dispose() {
         this.refreshDom.complete();
         this.detectChanges.complete();
@@ -2152,14 +2030,6 @@ class TaskMagicService {
         this.customPropertiesSubject.complete();
         this.OnSelectedRowChanged.complete();
     }
-    ///////////////////////////////
-    //Events:
-    /**
-     * Handle the Combobox "change" event
-     * @param event  The event received from the UI
-     * @param idx Id of the control raising the event
-     * @param line Row Id, if applicable
-     */
     onComboboxSelectionChanged(event, idx, line) {
         let guiEvent = getGuiEventObj('selectionchanged', idx, line);
         if (typeof (event) == 'number') {
@@ -2167,467 +2037,136 @@ class TaskMagicService {
         }
         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);
-    }
-    /**
-     * Handle the Listbox "change" event
-     * @param  event The event received from the UI
-     * @param idx Id of the control raising the event
-     */
-    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; // TODO: fix
-        this.insertEvent(guiEvent);
-    }
-    /**
-     * Handle the Checkbox "change" event
-     * @param  event The event received from the UI
-     * @param idx Id of the control raising the event
-     * @param  rowId Row Id, if applicable
-     */
-    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);
-    }
-    /**
-     * Handle tab selection change, caused by UI events
-     * @param idx Id of the control raising the event
-     * @param  layer Id of selected tabpage
-     */
-    mgOnTabSelectionChanged(idx, layer) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        guiEvent.Value = layer.toString();
-        this.insertEvent(guiEvent);
-    }
-    /**
-     * Handle the Radio button "change" event
-     * @param  event The event received from the UI
-     * @param idx Id of the control raising the event
-     */
-    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);
-    }
-    /**
-     * Inserts the "close" event to the magic WebClient event queue
-     */
-    close() {
-        this.insertEvent(getGuiEventObj('close', null, 0));
-    }
-    ///////////////////////////////
-    /**
-     * @ignore
-     */
-    IsStub() {
-        return this.magic.isStub;
-    }
-    /**
-     * @ignore
-     */
-    saveData(data) {
-        this.magic.saveData(data);
-    }
-    /**
-     * @ignore
-     */
-    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);
-    }
-    /**
-     * @ignore
-     */
-    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);
-    }
-    /**
-     * @ignore
-     */
-    loadData() {
-        alert('Please, overwrite method loadData');
-    }
-    /**
-     * @ignore
-     */
-    setStubValue(guiRowId, fc, name) {
-        if (this.IsStub()) {
-            try {
-                let val = this.Records.list[guiRowId].values[name];
-                fc.setValue(val);
-            }
-            catch (e) {
-            }
-        }
-    }
-}
-/** @nocollapse */ TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(ɵɵinject(EngineMagicService), ɵɵinject(OverlayWindowService)); };
-/** @nocollapse */ TaskMagicService.ɵprov = ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(TaskMagicService, [{
-        type: Injectable
-    }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
-
-/**
- * @ignore
- */
-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;
-    }
-}
-/** @nocollapse */ CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(ɵɵinject(EngineMagicService)); };
-/** @nocollapse */ CommandsCollectorMagicService.ɵprov = ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(CommandsCollectorMagicService, [{
-        type: Injectable
-    }], function () { return [{ type: EngineMagicService }]; }, null); })();
-
-/**
- * @ignore
- */
-class RouteCommand {
-}
-/**
- * @ignore
- */
-class RouterCommandsMagicService {
-    constructor() {
-        this.pendingRouteCommands = [];
-    }
-    AddRouteCommand(routeCommand) {
-        this.pendingRouteCommands.push(routeCommand);
-    }
-    ExecuteNextCommand() {
-        let pendingRouteCommand = this.pendingRouteCommands.shift();
-        if (!isNullOrUndefined(pendingRouteCommand)) {
-            pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
-        }
-    }
-}
-/** @nocollapse */ RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-/** @nocollapse */ RouterCommandsMagicService.ɵprov = ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(RouterCommandsMagicService, [{
-        type: Injectable
-    }], null, null); })();
-
-/**
- * Service for managing subforms and routing
- */
-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 /*:{ [x: string]: SubformDefinition }*/ = {};
-        this.routesDict = {}; // dictionary of router outlet to router path
-        this.currentRouteDefinition = null;
-    }
-    /**
-     * Finds and returns the component according to the subform name
-     * @param subformName
-     * @returns
-     */
-    mgGetComp(subformName) {
-        if (subformName in this.subformsDict) {
-            let formName = this.subformsDict[subformName].formName;
-            if (formName)
-                return this.componentList.getComponent(formName);
-        }
-        return null;
-    }
-    /**
-     * Returns the parameters of the subform
-     * @param subformName
-     * @returns
-     */
-    mgGetParameters(subformName) {
-        if (subformName in this.subformsDict) {
-            return this.subformsDict[subformName].parameters;
-        }
-        else
-            return "";
-    }
-    /**
-     * @ignore
-     */
-    deleteSubformComp(subformControlName, formName) {
-        if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-            if (this.subformsDict[subformControlName].formName === formName) {
-                this.subformsDict[subformControlName] = {};
-                this.task.refreshView();
-            }
-        }
-    }
-    /**
-     * @ignore
-     */
-    addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
-        this.pendingCommandsCollector.startCollecting();
-        let refreshNeeded = false;
-        if (isNullOrUndefined(routerPath)) { // call in destination subform
-            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 }
-            };
-            //this.ref.detectChanges();
-            refreshNeeded = true;
-        }
-        else { // call route
-            if (inDefaultOutlet)
-                subformControlName = "primary";
-            let routeParams = new List();
-            routeParams.push(routerPath);
-            if (params !== null) {
-                routeParams = routeParams.concat(params);
+                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 means that router.navigate() is already
-            // called once, but angular has not yet executed it (ngOnInit of the new component is not called).
-            // In such a case, do not executed router.navigate() again. Because, angular ignores the previous one.
-            // So, put a command in the queue which will be executed after the first one is executed.
-            if (SubformMagicService.currentCallerMgSubformServiceRef === null)
-                this.ExecuteRouteCommand(routeCommand);
             else
-                this.routerCommandsMagicService.AddRouteCommand(routeCommand);
+                guiEvent.Value = event.value;
         }
-        if (refreshNeeded)
-            this.task.refreshView();
+        this.insertEvent(guiEvent);
     }
-    /**
-     * Open the subform using a route command
-     */
-    ExecuteRouteCommand(routeCommand) {
-        let reusingComponent = false;
-        let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
-        let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
-        if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
-            // If the specified router outlet already hosts the same router path, router.navigate() doesn't actually navigate.
-            // So, first clear the outlet (passing null route params, clears the outlet) and then navigate again.
-            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);
     }
-    /**
-     * @ignore
-     */
-    init() {
-        // If commands were issued for this task before ngOnInit(), they were not executed because task had not registered for them.
-        // So, execute them now.
-        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);
     }
-    /**
-     * @ignore
-     */
-    refreshView() {
-        this.task.refreshView();
+    close() {
+        this.insertEvent(getGuiEventObj('close', null, 0));
     }
-    ///
-    // return the relative route
-    //
-    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();
-/** @nocollapse */ SubformMagicService.ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(ɵɵinject(TaskMagicService), ɵɵinject(ActivatedRoute), ɵɵinject(ComponentListMagicService), ɵɵinject(CommandsCollectorMagicService), ɵɵinject(Router), ɵɵinject(RouterCommandsMagicService)); };
-/** @nocollapse */ SubformMagicService.ɵprov = ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
-/*@__PURE__*/ (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); })();
 
-/**
- * Implements various table-related functionalities
- */
 class TableMagicService {
-    /**
-     *
-     * @param componentList Component-mapping service
-     * @param task Magic task service
-     */
     constructor(componentList, task) {
         this.componentList = componentList;
         this.task = task;
         this.shouldOpenFieldTextEditor = true;
     }
-    /**
-     * Refreshes the DataSource
-     */
     refreshDataSource() {
     }
-    /**
-     * Returns the table page size
-     */
     getPageSize() {
         return 10;
     }
-    /**
-     * Returns max no of rows in the table.
-     */
     getMaxRowsInTable() {
         return this.task.Records.list.length;
     }
-    /**
-     * Selects the specified row
-     * @param rowId The row to select
-     */
     selectRow(rowId) {
         this.selectedItem = rowId;
     }
     getSelectedRow() {
         return this.selectedItem;
     }
-    /**
-     * Returns the selected row
-     */
     selectedRow() {
         return null;
     }
-    /**
-     * Selects the specified page
-     * @param  pageId The page to select
-     */
     selectPage(pageId) {
     }
-    /**
-     * Returns whether a dialog should be opened for the HTML element
-     * @param  element The HTML element for which a dialog may be needed
-     * @returns
-     */
     OpenDialogForControl(element) {
         if (element.tagName === "MAT-SELECT" || element.tagName === "MAT-CHECKBOX" ||
             element.tagName === "INPUT" ||
@@ -2635,34 +2174,17 @@ class TableMagicService {
             return false;
         return true;
     }
-    /**
-     * Returns the dialog used to edit values
-     */
     getDialog() {
         return null;
     }
-    /**
-     * Handles the table "scrolled" event
-     */
     onScrollDown() {
         this.task.onScrollDown();
     }
-    /**
-     * To be overwitten in specific implelemtations
-     */
     sortData(e) { }
-    /**
-     * To be overwitten in specific implelemtations
-     */
     mgOnPaginateChange(e) { }
     mgOptionChanged(e) { }
-    /**
-     * Change the number of lines in a table
-     * @param  size New number of lines in table
-     */
     updateTableSize(size) {
-        if (size === 0) // never remove row 0 for now
-         {
+        if (size === 0) {
             size = 1;
             this.task.Records.clearFirstTableRecord(this.task.template);
         }
@@ -2670,17 +2192,11 @@ class TableMagicService {
         this.task.Records.updateSize(size);
         this.task.setIncludesFirst(false);
     }
-    /**
-     * @ignore
-     */
     setTableTopIndex(value) {
         if (!this.task.Records.includesFirst)
             value++;
         this.task.Records.setGuiTopIndex(value);
     }
-    /**
-     * @ignore
-     */
     getTableTopIndex() {
         let topIndex = this.task.Records.getGuiTopIndex();
         if (!this.task.Records.includesFirst)
@@ -2688,55 +2204,32 @@ class TableMagicService {
         return topIndex;
     }
 }
-/** @nocollapse */ TableMagicService.ɵfac = function TableMagicService_Factory(t) { return new (t || TableMagicService)(ɵɵinject(ComponentListMagicService), ɵɵinject(TaskMagicService)); };
-/** @nocollapse */ TableMagicService.ɵprov = ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
-/*@__PURE__*/ (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); })();
 
-/**
- * Enables changing the browser title using Magic expression (SetTitle)
- */
 class TitleMagicService {
-    /**
-     *
-     * @param titleService Angular's title-changing class
-     */
     constructor(titleService) {
         this.titleService = titleService;
     }
-    /**
-     * Set the new title of the window
-      * @param newTitle New title of the window
-     */
     setTitle(newTitle) {
         this.titleService.setTitle(newTitle);
     }
 }
-/** @nocollapse */ TitleMagicService.ɵfac = function TitleMagicService_Factory(t) { return new (t || TitleMagicService)(ɵɵinject(Title)); };
-/** @nocollapse */ TitleMagicService.ɵprov = ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
-/*@__PURE__*/ (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); })();
 
-/**
- * Provides the UI with values calculated by the Magic WebClient
- */
 class AccessorMagicService {
-    /**
-     * @ignore
-     */
     constructor(task) {
         this.task = task;
         this.Logger = null;
         this.Logger = Logger.Instance;
     }
-    /**
-     * Checks if the control is read-only
-     * @param controlId Id of control
-     * @returns Is the control not read-only
-     */
-    // CheckReadOnly
     checkIsReadOnly(controlId) {
         let properties;
         properties = this.task.Records.list[0].getControlMetadata(controlId);
@@ -2745,99 +2238,45 @@ class AccessorMagicService {
         else
             return true;
     }
-    /**
-     * Returns the text of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns The text of the control
-     */
-    // mgGetText
     getText(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.Text, rowId);
     }
-    /**
-     * Gets the text of the tab page
-     * @param controlId Id of control
-     * @param layer Id of tabpage
-     * @returns Text of tabpage
-     */
-    // mgGetTabpageText
     getTabpageText(controlId, layer) {
         const items = this.task.getProperty(controlId, HtmlProperties.ItemsList);
         if (typeof items !== "undefined")
             return items[layer].displayValue;
         return "";
     }
-    /**
-     * Gets the image defined for the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns Image set on control
-     */
-    // mgGetImage
     getImage(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Image, rowId);
         return result;
     }
-    /**
-     * Returns whether an image is set for this control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns returns true if control has an image set on it
-     */
-    // mgIsImageExists
     isImageExists(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Image, rowId);
         return !isNullOrUndefined(result);
     }
-    /**
-     * Gets the CSS classes set on the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns The classes for this control
-     */
-    // mgGetClasses
     getClasses(controlId, rowId) {
         return this.task.getClasses(controlId, rowId);
     }
-    /**
-     * Gets the CSS styles set on the control
-     * @param controlId Id of control
-     * @param styleName NAme of style requested
-     * @param rowId Id of row, if applicable
-     * @returns The style set on the control
-     */
-    // mgGetStyle
     getStyle(controlId, styleName, rowId) {
         let style = this.task.getStyle(controlId, styleName, rowId);
         return style;
     }
-    /**
-     * Returns whether a control is visible or not
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns Is the control visible or hidden
-     */
-    // mgGetVisible
     getVisible(controlId, rowId) {
         let vis = this.getProperty(controlId, HtmlProperties.Visible, rowId);
         return vis ? 'visible' : 'hidden';
     }
-    /**
-     * Returns object representing numeric picture
-     * @param picture string which is defined in magic
-     * @returns object representing numeric picture
-     */
-    // mgGetNumericPicture
     getNumericPicture(picture) {
         if (isNullOrUndefined(picture))
             return null;
         let pic = new PIC(picture, StorageAttribute.NUMERIC, 0);
         var obj = {};
-        if (pic.getPosPref_().length > 0)
-            obj['prefix'] = pic.getPosPref_();
-        else
-            obj['prefix'] = "";
+        obj['prefix'] = "";
+        if (pic.getPosPref_().length > 0 && pic.getNegPref_().length > 0) {
+            let pref = '-' + pic.getPosPref_();
+            if (pref == pic.getNegPref_())
+                obj['prefix'] = pic.getPosPref_();
+        }
         if (pic.getPosSuff_().length > 0)
             obj['suffix'] = pic.getPosSuff_();
         else
@@ -2859,118 +2298,51 @@ class AccessorMagicService {
             obj['wholes'] = pic.getWholes();
         return obj;
     }
-    /**
-     * Returns whether a control should have the "required" attribute set on it
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetMustInput
     getMustInput(controlId, rowId) {
         let vis = this.getProperty(controlId, HtmlProperties.MustInput, rowId);
         return vis ? 'true' : 'false';
     }
-    /**
-     * Returns whether a control is disabled
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgIsDisabled
     isDisabled(controlId, rowId) {
         let result = this.getProperty(controlId, HtmlProperties.Enabled, rowId);
         return result === true ? null : true;
     }
-    /**
-     * @ignore
-     */
-    // getProperty (not changed)
     getProperty(controlId, prop, rowId) {
         return this.task.getProperty(controlId, prop, rowId);
     }
-    /**
-     * Returns the title (tooltip) text of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetTitle
     getTitle(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.Tooltip, rowId);
     }
-    /**
-     * Gets the selection control's selected value
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // getSelectedValue
+    getZoomButtonTitle(controlId, rowId) {
+        return this.task.getProperty(controlId, HtmlProperties.ZoomButtonTooltip, rowId);
+    }
     getSelectedValue(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.SelectedValue, rowId);
     }
-    /**
-     * Gets the place-holder text of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetPlaceholder
     getPlaceholder(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.PlaceHolder, rowId);
     }
-    /**
-     * Returns a type for input controls - should the control be a simple text or a password control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetType
     getType(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Password, rowId);
         return result ? "password" : "text";
     }
-    /**
-     * Returns the tab-index of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetTabIndex
     getTabIndex(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.TabIndex, rowId);
     }
-    /**
-     * Returns the value of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    /// mgGetValue -->
     getValue(controlId, rowId) {
         let val = this.task.getValue(controlId, rowId);
         return val;
     }
-    /**
-     * Returns the Picture of the control
-     * @param controlId Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    /// getPicture -->
+    getFormattedValue(controlId, rowId) {
+        let val = this.task.getValue(controlId, rowId);
+        val = this.task.getFormattedValue(controlId, val);
+        return val;
+    }
     getPicture(controlId, rowId) {
         if (isNullOrUndefined(controlId))
             return null;
         let pic = this.task.GetControlPictureMask(controlId);
         return (pic != null) ? pic.getFormat().toString() : null;
     }
-    /**
-     * Returns the custom (user) properties of the control
-     * @param controlId Id of control
-     * @param propertyName Name of requested property
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetCustomProperty
     getCustomProperty(controlId, propertyNameOrRowID, rowId) {
         if (controlId.indexOf('~') == -1)
             return this.getCustomProperty_1(controlId, propertyNameOrRowID, rowId);
@@ -2995,22 +2367,21 @@ class AccessorMagicService {
         }
         return userProperties;
     }
-    /**
-     * Gets the values of the items of a selection control
-     * @param id Id of control
-     * @param rowId Id of row, if applicable
-     * @returns
-     */
-    // mgGetItemListValues
     getItemListValues(id, rowId) {
         return this.getProperty(id, HtmlProperties.ItemsList, rowId);
     }
-    /**
-   * Gets the display value of the item from items of a selection control
-   * @param id Id of control
-   * @param rowId Id of row, if applicable
-   * @returns
-   */
+    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);
@@ -3019,12 +2390,6 @@ class AccessorMagicService {
             displayValue = o[value].displayValue;
         return displayValue;
     }
-    /**
-     * Returns whether a tab page is selected or not
-     * @param  index of current option in iterarotr
-     * @param control Id of list control
-     * @returns
-     */ // isOptionSelected
     isOptionSelected(index, controlId) {
         let val = this.task.getValue(controlId, "0");
         for (let item of val) {
@@ -3033,40 +2398,18 @@ class AccessorMagicService {
         }
         return false;
     }
-    /**
-     * Returns whether a tab page is selected or not - used for the tab buttons
-     * @param controlId Id of control
-     * @param  layer Id of the tab page
-     * @returns
-     */ // mgIsTabPageSelected
     isTabPageSelected(controlId, layer) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedValue);
-        return val == (layer - 1); // comparing string to number!
-    }
-    /**
-     * Returns whether a tab page layer is selected or not - used for the div which represents the tab page
-     * @param controlId Id of control
-     * @param  layer Id of the tab page
-     * @returns
-     */ // mgIsTabLayerSelected
+        return val == (layer - 1);
+    }
     isTabPageLayerSelected(controlId, layer) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedLayer);
-        return val == (layer - 1); // comparing string to number!
+        return val == (layer - 1);
     }
-    /**
-     * Returns the index of the selected tab page
-     * @param controlId Id of control
-     * @returns
-     */
     getTabSelectedIndex(controlId) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedValue);
-        return val; // comparing string to number!
+        return val;
     }
-    // private methodes
-    /**
-     * @ignore
-     */
-    // mgIfRowCreated
     ifRowCreated(row) {
         if (row == null)
             return false;
@@ -3074,48 +2417,25 @@ class AccessorMagicService {
         let result = this.getFormGroupByRow(rowId);
         return !isNullOrUndefined(result);
     }
-    /**
-     * @ignore
-     */
-    // mgGetFormGroupByRow
     getFormGroupByRow(id) {
         return this.task.formGroups[id];
     }
-    /**
-     * @ignore
-     */
-    // isRowSelected (not changed)
     isRowSelected(controlId, rowId) {
         const selectedRow = this.task.getProperty(controlId, HtmlProperties.SelectedRow, "0");
         return selectedRow == rowId;
     }
-    /**
-     * Returns whether a row is in edit state
-     * @param row
-     */
     isRowInRowEditing(row) {
         let guiRowId = '0';
         guiRowId = typeof row == "number" ? row.toString() : row.rowId;
         return this.task.isRowInRowEditing(guiRowId);
     }
-    /**
-     * Returns whether a row is in edit state, use this method while control outside table control
-     * @param row
-     */
     isCurrentInRowEditing() {
         let row = this.task.tableService.getSelectedRow();
         return this.task.isRowInRowEditing(row);
     }
-    /**
-     * @ignore
-     */
-    // GetGuiTopIndex
     guiTopIndex() {
         return this.task.tableService.getTableTopIndex();
     }
-    /**
-     * @ignore
-     */
     getErrMsg(id, rowId) {
         let c = this.task.getFormControl(rowId, id);
         if (c.hasError('required'))
@@ -3137,12 +2457,6 @@ class AccessorMagicService {
         }
         return 'unknown error';
     }
-    /**
-     * Sets a user-supplied value to the specified control
-     * @param controlName
-     * @param value
-     * @param refreshDisplay
-     */
     setValueToControl(controlName, value, refreshDisplay) {
         if (typeof refreshDisplay === "undefined")
             refreshDisplay = true;
@@ -3151,44 +2465,28 @@ class AccessorMagicService {
         guiEvent.param = refreshDisplay;
         this.task.insertEvent(guiEvent);
     }
-    /**
-   * @ignore
-   */
     isDataviewEmpty() {
         return this.task.Records.isEmptyDataView;
     }
-    /**
-     * simulates a click event on the specified control, for the Magic engine
-     * @param controlName
-     * @param rowId
-     */
     simulateClick(controlName, rowId) {
         if (typeof rowId === "undefined")
             rowId = 0;
         this.task.insertEvent(getGuiEventObj('click', controlName, rowId));
     }
-    /**
-     * Return Boolean TRUE if user logged in Else it will return FALSE
-     */
     isLoggedIn() {
         return this.task.getIsLoggenIn();
     }
-    /**
-     * Returns JS object containing the records with all table fields.
-     */
     GetFormRecords() {
         let rowId = 0;
         let recArray;
         if (!isNullOrUndefined(this.task.Records) && this.task.Records.list.length > 0) {
             let recList = this.task.Records.list;
             let tableControls = new Array();
-            //Generate list of table fields names
             for (const key in this.task.template) {
                 if (this.task.template[key] == '1')
                     tableControls.push(key);
             }
             recArray = new Array();
-            //Update the records as list of objects with values for table fields.
             if (tableControls.length > 0) {
                 recList.forEach((ctrlMetaData) => {
                     if (this.task.Records.isRowCreated(rowId)) {
@@ -3204,20 +2502,23 @@ class AccessorMagicService {
         }
         return recArray;
     }
+    SetCookie(name, value, expires, path, domain, secure, sameSite) {
+        CookieService.setCookie(name, value, expires, path, domain, secure, sameSite);
+    }
+    GetCookie(name) {
+        return CookieService.getCookie(name);
+    }
+    DeleteCookie(name) {
+        return CookieService.deleteCookie(name);
+    }
 }
-/** @nocollapse */ AccessorMagicService.ɵfac = function AccessorMagicService_Factory(t) { return new (t || AccessorMagicService)(ɵɵinject(TaskMagicService)); };
-/** @nocollapse */ AccessorMagicService.ɵprov = ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
-/*@__PURE__*/ (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); })();
 
-/**
- * Central place for adding the Magic services
- */
 class MagicServices {
-    /**
-     * @ignore
-     */
     constructor(task, subformService, tableService, titleService, mgAccessorService) {
         this.task = task;
         this.subformService = subformService;
@@ -3230,74 +2531,36 @@ class MagicServices {
         task.mgAccessorService = mgAccessorService;
     }
 }
-/** @nocollapse */ MagicServices.ɵfac = function MagicServices_Factory(t) { return new (t || MagicServices)(ɵɵinject(TaskMagicService), ɵɵinject(SubformMagicService), ɵɵinject(TableMagicService), ɵɵinject(TitleMagicService), ɵɵinject(AccessorMagicService)); };
-/** @nocollapse */ MagicServices.ɵprov = ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
-/*@__PURE__*/ (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); })();
 
-/**
- * Base component representing a Magic task
- */
 class TaskBaseMagicComponent {
-    /**
-     *
-     * @param ref changes-detector object
-     * @param magicServices Access point for all Magic services
-     */
     constructor(ref, magicServices) {
         this.ref = ref;
         this.magicServices = magicServices;
-        /**
-         * @ignore
-         */
         this.magicProperties = MagicProperties;
     }
-    /**
-     * Returns the Magic task service
-     * @returns
-     */
     get task() {
         return this.magicServices.task;
     }
-    /**
-     * Returns the Magic subform service
-     * @returns
-     */
     get mgSub() {
         return this.magicServices.subformService;
     }
-    /**
-     * Returns the Magic table service
-     * @returns
-     */
     get tableService() {
         return this.magicServices.tableService;
     }
-    /**
-     * Returns the Magic accessor service
-     * @returns
-     */
     get mg() {
         return this.magicServices.mgAccessorService;
     }
-    /**
-     * Returns the task Id
-     * @returns
-     */
     get taskId() {
         return this.task.taskId;
     }
-    /**
-     * Returns the FormGroup for screen-mode forms
-     * @returns
-     */
     get screenFormGroup() {
         return this.task.ScreenModeControls;
     }
-    /**
-     * Interface implementation
-     */
     ngOnInit() {
         let subscription = this.task.detectChanges.pipe().subscribe(c => {
             this.ref.detectChanges();
@@ -3305,48 +2568,19 @@ class TaskBaseMagicComponent {
         this.task.initTask(this.taskIdParam, this.taskDescription);
         this.createFormControlsAccessor(this.screenFormGroup);
         this.setInputDateFormat();
-        // subcribe to custom property changes
         this.task.customPropertiesSubject.pipe().subscribe(property => {
             this.PropertyChanged(property.propertyName, property.rowId, property.value);
         });
-        // subcribe to records count changes
         this.task.recordsCountChangeSubject.pipe().subscribe(value => {
             this.RecordsCountChanged(value);
         });
     }
-    /**
-     * @ignore
-     */
     createFormControlsAccessor(formGroup) { }
-    /**
-     * @ignore
-     */
     setInputDateFormat() { }
-    /**
-     * This method is called when the value of any custom property is updated in Magic
-     * propertyName : name of property which is updated. The format is <controlname>~<propertyname>
-     * rowId : row number of the updated property for controls in table control (0 for controls outside table)
-     * value : updated value of the property
-     * @returns : void
-     * To use the method override it in your component and check the property name and write you code ..for eg
-     * if(propertyName == 'controlname~propertyName') {// your code}
-     *  else { // your code}
-     */
     PropertyChanged(propertyName, rowId, value) {
-        // intentionally left blank because the implementation should be in the derived class
-    }
-    /**
-     * Records count change subject is subscribed to change in its value. This method will be called
-     * as the value of records count is received at from server.
-     * @returns : void
-     * To use the method override it in your component.
-     */
+    }
     RecordsCountChanged(recordsCount) {
-        // intentionally left blank because the implementation should be in the derived class
     }
-    /**
-     * Interface implementation
-     */
     ngAfterViewInit() {
         this.mgSub.init();
     }
@@ -3356,44 +2590,32 @@ class TaskBaseMagicComponent {
             this.task.oldPageSize = this.tableService.getPageSize();
         }
     }
-    /**
-     * Interface implementation
-     */
     ngOnDestroy() {
         this.task.dispose();
     }
 }
-/** @nocollapse */ TaskBaseMagicComponent.ɵfac = function TaskBaseMagicComponent_Factory(t) { return new (t || TaskBaseMagicComponent)(ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(MagicServices)); };
-/** @nocollapse */ 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 });
-/*@__PURE__*/ (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
         }] }); })();
 
-/**
- * @ignore
- */
 class RowMagicDirective {
     constructor(_task, element) {
         this._task = _task;
         this.element = element;
-        /**
-         * @ignore
-         */
         this.rowChangedSubscriber = null;
         this.htmlElement = this.element.nativeElement;
     }
-    /**
-     * Initializes this object
-     */
     ngOnInit() {
         this.rowChangedSubscriber = this._task
             .OnSelectedRowChanged.pipe(filter(rowId => rowId === this.rowId))
@@ -3408,16 +2630,7 @@ class RowMagicDirective {
         return (rect.top >= parentRect.top &&
             rect.bottom <= parentRect.bottom);
     }
-    /**
-     * Cleanup
-     */
     ngOnDestroy() {
-        // Don't know why, but when the table is loaded for the first time, we
-        // get ngOnInit() for the 1st row (rowId = "0") and then ngOnDestroy()
-        // for number of rows in the page but here this.rowId is undefined.
-        // Since ngOnInit() was not called for all these rows, this.rowChangedSubscriber
-        // is null and hence crashes.
-        // So, the condition to check nulity is added.
         if (this.rowChangedSubscriber !== null) {
             this.rowChangedSubscriber.unsubscribe();
         }
@@ -3425,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;
         }
     }
 }
-/** @nocollapse */ RowMagicDirective.ɵfac = function RowMagicDirective_Factory(t) { return new (t || RowMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef)); };
-/** @nocollapse */ 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"] } });
-/*@__PURE__*/ (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: [{
@@ -3446,35 +2660,16 @@ class RowMagicDirective {
             args: ['click', ['$event']]
         }] }); })();
 
-/**
- * Connects HTML elements to the Magic Web Client engine
- */
 class MagicDirective {
-    /**
-     *
-     * @param _task The task service
-     * @param element The element for which the directive is applied
-     * @param renderer Renderer for the element
-     * @param vcRef
-     * @param magicRow
-     */
     constructor(_task, element, renderer, vcRef, magicRow) {
         this._task = _task;
         this.element = element;
         this.renderer = renderer;
         this.vcRef = vcRef;
         this.magicRow = magicRow;
-        /**
-         * Collection of event handlers for this element
-         */
         this.eventHandlers = {};
         this.eventsOnlyVal = false;
         this.htmlElement = this.element.nativeElement;
-        //let c = (<any>this.vcRef)._view;
-        //while (!(c instanceof TaskBaseMagicComponent)) {
-        //  c = c.component;
-        //}
-        //this.component = c;
         if (!(typeof magicRow === 'undefined' || magicRow === null))
             this.rowId = magicRow.rowId;
     }
@@ -3483,36 +2678,28 @@ class MagicDirective {
         this.selector = 'magic';
     }
     ;
-    /**
-     * This flag is used when we only want to register to events, but do not want to execute commands sent from server
-     */
     set eventsOnly(val) {
         console.log('eventsOnly');
         this.eventsOnlyVal = true;
     }
     ;
-    /**
-     * Get the task service
-     * @returns
-     */
     get task() {
         return this._task;
     }
-    /**
-     * Register to the events this element may need to handle
-     */
     regEvents() {
-        // Handle events for which event handler may be removed and restored
         this.eventHandlers['focusin'] = this.OnFocus.bind(this);
         Object.keys(this.eventHandlers).forEach((key) => {
             this.focusUnlistener = this.renderer.listen(this.htmlElement, key, this.eventHandlers[key]);
         });
-        // Handle events with anonymous  event handlers
-        let events = ['click', 'mousedown', 'dblclick']; // ,'resize', 'load', 'unload'
+        let events = ['click', 'mousedown', 'dblclick'];
         events.forEach(event => {
             this.renderer.listen(this.htmlElement, event, (e) => {
-                this.task.insertEvent(getGuiEventObj(event, this.id, +this.rowId));
-                e.cancelBubble = true;
+                let fromButton = false;
+                if (this.htmlElement instanceof HTMLButtonElement)
+                    fromButton = true;
+                this.task.insertEvent(getGuiEventObj(event, this.id, +this.rowId, fromButton));
+                if (MagicDirective.noOfAutoCompleteBoxesOpened < 1)
+                    e.cancelBubble = true;
             });
         });
         this.renderer.listen(this.htmlElement, 'change', (e) => {
@@ -3523,13 +2710,10 @@ class MagicDirective {
                 this.task.insertEvent(guiEvent);
             }
         });
-        // handle the input event
         fromEvent(this.htmlElement, 'input').pipe(map((event) => {
             return event.target.value;
-        }), debounceTime(200) // time after which value will be sent to magic
-        ).subscribe((x) => {
+        }), debounceTime(200)).subscribe((x) => {
             if (this.task.getProperty(this.id, HtmlProperties.BindingLevel, this.rowId) === BindingLevel.Character) {
-                // Don't support character binding for date/time values
                 let attribute = this.task.Records.list[0].getControlMetadata(this.id).dataType;
                 if (attribute !== StorageAttributeType.Date && attribute != StorageAttributeType.Time)
                     this.task.mgAccessorService.setValueToControl(this.id, x, true);
@@ -3555,25 +2739,16 @@ class MagicDirective {
                 (e.keyCode >= GuiConstants.KEY_F1 && e.keyCode <= GuiConstants.KEY_F12);
             if (guiEvent.modifiers !== Modifiers.MODIFIER_NONE || supportedKey) {
                 guiEvent.keyCode = e.keyCode;
-                // Defect 160021 fixed - don't set e.cancelBubble when combobox is opened and esc key is pressed
-                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);
             }
         });
     }
-    /**
-     * Handle focus event
-     */
     OnFocus() {
         this.task.insertEvent(getGuiEventObj('focus', this.id, +this.rowId));
         event.cancelBubble = true;
     }
-    /**
-     * Is the command's element the same as this directive's element
-     * @param command
-     * @returns true/false
-     */
     IsSameElement(command) {
         let line = command.line;
         if (this.task.isTableControl(command.CtrlName))
@@ -3582,17 +2757,9 @@ class MagicDirective {
             (line === +this.rowId ||
                 (line === 0 && isNullOrUndefined(this.rowId))));
     }
-    /**
-     * Is the command's element the same as this directive's component
-     * @param command
-     * @returns true/false
-     */
     IsSameComponent(command) {
         return (command.controlName === this.id);
     }
-    /**
-     * @ignore
-     */
     regUpdatesUI() {
         this.subscribeRefreshDom = this.task
             .refreshDom.pipe(filter(c => this.IsSameElement(c)))
@@ -3614,17 +2781,10 @@ class MagicDirective {
             this.handleInteractiveCommands(command);
         });
     }
-    /**
-     * Initializes this object
-     */
     ngOnInit() {
         this.regEvents();
         this.regUpdatesUI();
     }
-    /**
-     * Handles the commands received from the Magic WebClient engine
-     * @param command
-     */
     handleCommand(command) {
         switch (command.CommandType) {
             case CommandType.SET_PROPERTY:
@@ -3632,14 +2792,12 @@ class MagicDirective {
                 break;
             case CommandType.SET_FOCUS:
                 this.focusUnlistener();
-                this.htmlElement.focus();
+                if (!(command.obj.ConnectedControl && this.htmlElement instanceof HTMLButtonElement))
+                    this.htmlElement.focus();
                 this.focusUnlistener = this.renderer.listen(this.htmlElement, 'focusin', this.eventHandlers['focusin']);
                 break;
         }
     }
-    /**
-     * handle the interactive commands like CallJS
-     */
     handleInteractiveCommands(command) {
         switch (command._commandType) {
             case InteractiveCommandType.CALL_JS:
@@ -3649,24 +2807,18 @@ class MagicDirective {
                 let resultString = '';
                 try {
                     if (!isNullOrUndefined(magicComponent[methodName])) {
-                        // invoke the method on instance of magic componenet
                         resultString = magicComponent[methodName].apply(magicComponent, args);
                     }
                     else
-                        console.error('Instance method ' + methodName + ' does not exists'); // when method is not found
+                        console.error('Instance method ' + methodName + ' does not exists');
                 }
                 catch (e) {
-                    // any other exception
                     console.error(e.message);
                 }
-                command.resultString = resultString; // update the return value
+                command.resultString = resultString;
                 break;
         }
     }
-    /**
-     * Handle the Magic set-property command
-     * @param command
-     */
     handleSetProperty(command) {
         switch (command.Operation) {
             case HtmlProperties.ReadOnly:
@@ -3677,22 +2829,20 @@ class MagicDirective {
                 break;
         }
     }
-    /**
-     * Cleanup
-     */
     ngOnDestroy() {
         this.subscribeRefreshDom.unsubscribe();
     }
 }
 MagicDirective.opened = false;
-/** @nocollapse */ MagicDirective.ɵfac = function MagicDirective_Factory(t) { return new (t || MagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(RowMagicDirective, 8)); };
-/** @nocollapse */ MagicDirective.ɵdir = ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", rowId: "rowId" } });
-/*@__PURE__*/ (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,
@@ -3704,9 +2854,6 @@ MagicDirective.opened = false;
             type: Input
         }] }); })();
 
-/**
- * @ignore
- */
 class NoControlMagicDirective extends MagicDirective {
     constructor(_task, element, renderer, vcRef, magicRow) {
         super(_task, element, renderer, vcRef, magicRow);
@@ -3741,12 +2888,10 @@ class NoControlMagicDirective extends MagicDirective {
             }
         }
     }
-    // is the div a tab control
     isTabControl() {
         return this.htmlElement instanceof HTMLDivElement &&
             this.htmlElement.children[0].getAttribute('magicMark') === "magicTabControl";
     }
-    // is the div a radio buttons wrapper
     isRadio() {
         return this.htmlElement instanceof HTMLDivElement &&
             this.htmlElement.children[0].getAttribute('magicMark') === "magicRadio";
@@ -3755,7 +2900,6 @@ class NoControlMagicDirective extends MagicDirective {
         super.handleCommand(command);
         switch (command.CommandType) {
             case CommandType.SET_CLASS:
-                //remove the class which was replaced by this new one, as registered in the ControlMetadata
                 const controlMetadata = this._task.Records.list[0].getControlMetadata(this.id);
                 if (controlMetadata.removedClass != '') {
                     this.htmlElement.classList.remove(controlMetadata.removedClass);
@@ -3768,7 +2912,7 @@ class NoControlMagicDirective extends MagicDirective {
                     this.htmlElement.innerText = command.value;
                 if (this.htmlElement instanceof HTMLSelectElement)
                     this.htmlElement.value = command.value;
-                if (this.htmlElement instanceof HTMLAnchorElement) //hyper-text button
+                if (this.htmlElement instanceof HTMLAnchorElement)
                     this.htmlElement.text = command.value;
                 if (this.htmlElement instanceof HTMLInputElement) {
                     if (this.htmlElement.type === "checkbox") {
@@ -3792,7 +2936,6 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
-    // handle set-property commands
     handleSetProperty(command) {
         super.handleSetProperty(command);
         switch (command.Operation) {
@@ -3808,7 +2951,6 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
             case HtmlProperties.ItemsList:
                 if (this.htmlElement instanceof HTMLSelectElement) {
-                    // clear the list
                     var len = this.htmlElement.length;
                     for (var i = len - 1; i >= 0; i--) {
                         this.htmlElement.remove(i);
@@ -3850,8 +2992,7 @@ class NoControlMagicDirective extends MagicDirective {
                         let child = tabControl.children[i];
                         const layer = child.getAttribute('layer') - 1;
                         if (child instanceof HTMLButtonElement) {
-                            // set button style
-                            if (layer == command.obj1) { // compare int to string
+                            if (layer == command.obj1) {
                                 child.classList.add('tab_button_active');
                             }
                             else {
@@ -3859,7 +3000,6 @@ class NoControlMagicDirective extends MagicDirective {
                             }
                         }
                         else {
-                            // not a buton - hide unselected tabpages
                             let style = (layer == command.obj1) ? 'display: inline' : 'display: none';
                             child.setAttribute('style', style);
                         }
@@ -3881,141 +3021,23 @@ class NoControlMagicDirective extends MagicDirective {
         }
     }
 }
-/** @nocollapse */ NoControlMagicDirective.ɵfac = function NoControlMagicDirective_Factory(t) { return new (t || NoControlMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(RowMagicDirective, 8)); };
-/** @nocollapse */ NoControlMagicDirective.ɵdir = ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: ["magicnc", "magic"] }, features: [ɵɵInheritDefinitionFeature] });
-/*@__PURE__*/ (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']
         }] }); })();
 
-/**
- * Mock component, implements routing by connecting the requested URL with the appropriate Magic task
- */
-class RouterContainerMagicComponent {
-    /**
-     *
-     * @param changeDetectorRef
-     * @param activatedRoute
-     * @param magic
-     * @param componentFactoryResolver
-     * @param viewContainerRef
-     * @param componentList
-     * @param pendingCommandsCollector
-     */
-    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;
-    }
-    /**
-     * Initialization
-     */
-    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;
-        // if this is LoadOnDemandModuleMagicComponent it's mean that this is load on demand module and we
-        // need to take the path form routeConfig.path
-        let calcRouterPath = currentActiveRoute.routeConfig.path;
-        // add the RouterPath only if exist
-        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() {
-        // re-init subformMagicService  since it may change after executing "RouterNavigate" event.
-        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;
-            //When the component is initialized, then also we get the notification for paramMap subscription.
-            //But in this case,  we do not have to raise the event, because magic engine itself has  initiated the route with the same parameters.
-            //So, control it via ignoreParamChange flag.
-            let ignoreParamChange = true;
-            myActiveRoute.paramMap.subscribe(params => {
-                if (!ignoreParamChange)
-                    this.insertRouteEvent(myActiveRoute);
-                ignoreParamChange = false;
-            });
-            this.parentMgSubformService.refreshView();
-            this.routerCommandsMagicService.ExecuteNextCommand();
-        }
-    }
-    /**
-     * Cleanup
-     */
-    ngOnDestroy() {
-        // TODO Routing: Call close() only if the task is not already closed.
-        // Task can be closed when a router is overlayed by another task via call operation.
-        if (this.componentRef != null) {
-            this.componentRef.instance.task.close();
-            let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
-        }
-    }
-}
-/** @nocollapse */ 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)); };
-/** @nocollapse */ RouterContainerMagicComponent.ɵcmp = ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
-/*@__PURE__*/ (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); })();
-
-/**
- * @ignore
- */
 class Constants {
 }
 Constants.DATE_FMT = 'dd/MMM/yyyy';
-/**
- * @ignore
- */
 class DateMagicPipe extends DatePipe {
     constructor(_task) {
         super('en-US');
@@ -4027,7 +3049,6 @@ class DateMagicPipe extends DatePipe {
         let mgDateFormatter = new MgDateFormatter();
         if (!isNullOrUndefined(value) && mask !== null) {
             formatStr = mgDateFormatter.ConvertMgDateFormatToAngular(mask);
-            // If control is label control of table, due to query mode, then save the format here.
             if (formatStr != null && this._task.isTableControl(controlId)) {
                 if (this._task.mgInputDateFormat == null)
                     this._task.mgInputDateFormat = formatStr;
@@ -4041,9 +3062,9 @@ class DateMagicPipe extends DatePipe {
         return value;
     }
 }
-/** @nocollapse */ DateMagicPipe.ɵfac = function DateMagicPipe_Factory(t) { return new (t || DateMagicPipe)(ɵɵdirectiveInject(TaskMagicService)); };
-/** @nocollapse */ DateMagicPipe.ɵpipe = ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
-/*@__PURE__*/ (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'
@@ -4108,17 +3129,11 @@ class MgDateFormatter {
             return formatStr.ToString();
         }
         else
-            return "dd-mm-yyyy"; // return default format.
+            return "dd-mm-yyyy";
     }
 }
 
-/**
- * Perform Magic validation on input controls which hold alphanumeric strings
- */
 class MgformatMagicDirective {
-    /**
-     * @ignore
-     */
     constructor(magicDir, _task) {
         this.magicDir = magicDir;
         this._task = _task;
@@ -4126,20 +3141,12 @@ class MgformatMagicDirective {
     ngAfterViewInit() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null && this._task.mgInputDateFormat == null) {
-            // get the first date control's format.
             let pic = this._task.GetControlPictureMask(this.magicDir.id);
             if (pic.getAttr() == StorageAttribute.DATE) {
                 this.formatDate(pic);
             }
         }
     }
-    /**
-     * @ignore
-     */
-    /**
-     * This can be used to set pattern
-     * On input, verifies the input matches the required mask
-     */
     onFocusEvent($event) {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null) {
@@ -4164,10 +3171,6 @@ class MgformatMagicDirective {
             }
         }
     }
-    /**
-     * @ignore
-    */
-    // This can be used to implement uppercase/lower case
     onChangeEvent($event) {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         let attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
@@ -4185,9 +3188,6 @@ class MgformatMagicDirective {
         let mgDateFormatter = new MgDateFormatter();
         this._task.mgInputDateFormat = mgDateFormatter.ConvertMgDateFormatToAngular(pic.getMask());
     }
-    /**
-     * @ignore
-     */
     formatAlphaUnicode(control) {
         let value = control.value;
         if (value !== null && value.length > 0) {
@@ -4213,9 +3213,6 @@ class MgformatMagicDirective {
             control.setValue(valueStr.ToString());
         }
     }
-    /**
-     * @ignore
-     */
     formatBoolean(control) {
         let value = control.value;
         if (value !== null && value.length > 0) {
@@ -4228,12 +3225,6 @@ class MgformatMagicDirective {
             }
         }
     }
-    /**
-     * @ignore
-     */
-    /// <summary>
-    /// generate pattern from  fld's  format
-    /// </summary>
     generatePattern(attribute, pic) {
         let pattern = "";
         switch (attribute) {
@@ -4247,12 +3238,6 @@ class MgformatMagicDirective {
         }
         return pattern;
     }
-    /**
-     * @ignore
-     */
-    /// <summary>
-    /// generate pattern for Alpha
-    /// </summary>
     generatePatternForNumber(pic) {
         let patternStr = new StringBuilder();
         patternStr.Append("^");
@@ -4265,9 +3250,6 @@ class MgformatMagicDirective {
         patternStr.Append("$");
         return patternStr.ToString();
     }
-    /**
-     * @ignore
-     */
     isPatternGenerationNeeded(attr, pic) {
         switch (attr) {
             case StorageAttribute.NUMERIC:
@@ -4277,12 +3259,6 @@ class MgformatMagicDirective {
                 return (pic.getMaskChars() > 0) ? true : false;
         }
     }
-    /**
-     * @ignore
-     */
-    /// <summary>
-    /// generate pattern for Alpha
-    /// </summary>
     generatePatternForAlpha(pic) {
         let cnt = 0;
         let inputAllChars = false;
@@ -4293,7 +3269,6 @@ class MgformatMagicDirective {
         let pattern = new StringBuilder();
         pattern.Append("^");
         for (let i = 0; i < mask.length;) {
-            //start new subset , if mask[i] is one of these.
             if (inputAllChars && (mask.charCodeAt(i) == PICInterface.PIC_N || mask.charCodeAt(i) == PICInterface.PIC_U || mask.charCodeAt(i) == PICInterface.PIC_L
                 || mask.charCodeAt(i) == PICInterface.PIC_X)) {
                 pattern.Append("(");
@@ -4339,13 +3314,9 @@ class MgformatMagicDirective {
         pattern.Append("$");
         return pattern.ToString();
     }
-    /**
-     * @ignore
-     */
     getDirectiveCount(mask, idx, pattern, changeInPattern) {
         changeInPattern.value = false;
         let patternCount = 0;
-        // find max chars
         while (idx < mask.length && this.IsPatternMatches(mask.charCodeAt(idx).toString(), pattern)) {
             patternCount++;
             idx++;
@@ -4354,9 +3325,6 @@ class MgformatMagicDirective {
             changeInPattern.value = true;
         return patternCount;
     }
-    /**
-     * @ignore
-     */
     IsPatternMatches(mask, pattern) {
         for (let i = 0; i < pattern.length; i++)
             if (mask == pattern[i])
@@ -4364,11 +3332,11 @@ class MgformatMagicDirective {
         return false;
     }
 }
-/** @nocollapse */ MgformatMagicDirective.ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(ɵɵdirectiveInject(MagicDirective), ɵɵdirectiveInject(TaskMagicService)); };
-/** @nocollapse */ 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); });
     } } });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MgformatMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(MgformatMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[mgFormat]'
@@ -4381,9 +3349,6 @@ class MgformatMagicDirective {
             args: ['change', ['$event']]
         }] }); })();
 
-/**
- * @ignore
- */
 class TimeMagicPipe extends DatePipe {
     constructor(_task) {
         super('en-US');
@@ -4419,33 +3384,20 @@ class TimeMagicPipe extends DatePipe {
         return value;
     }
 }
-/** @nocollapse */ TimeMagicPipe.ɵfac = function TimeMagicPipe_Factory(t) { return new (t || TimeMagicPipe)(ɵɵdirectiveInject(TaskMagicService)); };
-/** @nocollapse */ TimeMagicPipe.ɵpipe = ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
-/*@__PURE__*/ (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'
             }]
     }], function () { return [{ type: TaskMagicService }]; }, null); })();
 
-/**
- * Validates the field range.
- */
 class RangeValidatorMagicDirective {
-    /**
-     *
-     * @param _task The task service
-     * @param vcRef
-     */
     constructor(_task, vcRef) {
         this._task = _task;
         this.vcRef = vcRef;
     }
-    /**
-     * Validation method
-     * @param c FormControl to validate
-     * @returns If validation fails, return error message, else returns null
-     */
     validate(c) {
         let controlName;
         controlName = this.getControlName(c);
@@ -4467,23 +3419,20 @@ class RangeValidatorMagicDirective {
             };
         }
     }
-    /**
-     * @ignore
-     */
     getControlName(c) {
         const formGroup = c.parent.controls;
         return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
     }
 }
-/** @nocollapse */ RangeValidatorMagicDirective.ɵfac = function RangeValidatorMagicDirective_Factory(t) { return new (t || RangeValidatorMagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ViewContainerRef)); };
-/** @nocollapse */ 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,
             }
         ])] });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(RangeValidatorMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(RangeValidatorMagicDirective, [{
         type: Directive,
         args: [{
                 selector: '[rangevalidator] ',
@@ -4495,56 +3444,37 @@ class RangeValidatorMagicDirective {
                     }
                 ]
             }]
-    }], 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);
 } }
-/**
- * Represents a Magic subform
- */
 class SubformMagicComponent {
-    /**
-     * @ignore
-     */
     constructor(vcRef, mgSub) {
         this.vcRef = vcRef;
         this.mgSub = mgSub;
-        /**
-         * @ignore
-         */
         this.component = null;
-        // For angular 10 - find the component from views
         this.component = (this.vcRef._hostView).find(v => !isNullOrUndefined(v));
     }
-    /**
-     * @ignore
-     */
     set magic(val) { this.id = val; }
     ;
-    /**
-     * @ignore
-     */
     get Component() {
         return this.mgSub.mgGetComp(this.id);
     }
-    /**
-     * @ignore
-     */
     get Parameters() {
         return this.mgSub.mgGetParameters(this.id);
     }
 }
-/** @nocollapse */ SubformMagicComponent.ɵfac = function SubformMagicComponent_Factory(t) { return new (t || SubformMagicComponent)(ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(SubformMagicService)); };
-/** @nocollapse */ 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 });
-/*@__PURE__*/ (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',
@@ -4556,52 +3486,42 @@ class 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 = ["*"];
-/**
- * Represents a Magic subform
- */
+const _c1 = ["*"];
 class ErrorMagicComponent {
-    /**
-     * @ignore
-     */
     constructor(_task, mgService, changeDetectorRef) {
         this._task = _task;
         this.mgService = mgService;
         this.changeDetectorRef = changeDetectorRef;
-        // if true - display standard magic error message, if false - customer has provides his own content and we'll use it
         this.defaultDisplay = true;
         this.rowId = "0";
     }
-    /**
-     * @ignore
-     */
     set magic(val) {
         this.id = val;
     }
@@ -4615,10 +3535,6 @@ class ErrorMagicComponent {
         this.changeDetectorRef.detectChanges();
     }
     ;
-    /**
-     * returns true if the html element has no children
-     * @param element
-     */
     isEmpty(element) {
         const nodes = element.childNodes;
         for (let i = 0; i < nodes.length; i++) {
@@ -4629,9 +3545,6 @@ class ErrorMagicComponent {
         }
         return true;
     }
-    /**
-     * @ignore
-     */
     HasErrors(id) {
         if (!isUndefined(id)) {
             let control = this._task.getFormControl(this.rowId, id);
@@ -4653,19 +3566,19 @@ class ErrorMagicComponent {
         return false;
     }
 }
-/** @nocollapse */ ErrorMagicComponent.ɵfac = function ErrorMagicComponent_Factory(t) { return new (t || ErrorMagicComponent)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(AccessorMagicService), ɵɵdirectiveInject(ChangeDetectorRef)); };
-/** @nocollapse */ 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 });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(ErrorMagicComponent, [{
+        i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
+    } }, directives: [i1.NgIf], encapsulation: 2 });
+(function () { i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
@@ -4679,7 +3592,7 @@ class ErrorMagicComponent {
     </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: [{
@@ -4690,28 +3603,19 @@ class ErrorMagicComponent {
             args: ['customContent', { static: false }]
         }] }); })();
 
-/**
- * Directive for checkboxes, to handle the 'change' event
- */
 class CheckboxMagicDirective {
-    /**
-     * @ignore
-     */
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
-    /**
-     * Handles the Checkbox 'change' event - pass it to the Magic engine
-     */
     onChange($event) {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-/** @nocollapse */ CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-/** @nocollapse */ 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); });
     } } });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(CheckboxMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -4723,25 +3627,19 @@ class CheckboxMagicDirective {
             args: ['change', ['$event']]
         }] }); })();
 
-/**
- * Directive for comboboxes, to handle the 'change' event
- */
 class ComboboxMagicDirective {
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
-    /**
-     * Handles the Combobox 'change' event - pass it to the Magic engine
-     */
     onChange($event) {
         this.magicDirective.task.onComboboxSelectionChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-/** @nocollapse */ ComboboxMagicDirective.ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-/** @nocollapse */ 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); });
     } } });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(ComboboxMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(ComboboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `select[magic]:not([multiple])`,
@@ -4751,56 +3649,38 @@ class ComboboxMagicDirective {
             args: ['change', ['$event']]
         }] }); })();
 
-/**
- * This service supports custom actions on magic exit
- */
 class ExitMagicService {
-    /**
-     * Override this method to implement custom logic on magic exit
-     */
     exitMagic() {
         console.log("Magic application terminated");
     }
 }
-/** @nocollapse */ ExitMagicService.ɵfac = function ExitMagicService_Factory(t) { return new (t || ExitMagicService)(); };
-/** @nocollapse */ ExitMagicService.ɵprov = ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(ExitMagicService, [{
+ExitMagicService.ɵfac = function ExitMagicService_Factory(t) { return new (t || 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);
 } }
-/**
- * Root Magic component
- */
 class MagicShellComponent {
-    /**
-     *
-     * @param magic Magic's service
-     * @param componentList Magic component list
-     * @param changeDetectorRef Changes detector
-     * @param titleService Title setting service
-     * @param httpClient The native httpClient instance
-     * @param exitMagicService Magic exit service
-     */
     constructor(engineMagicService, componentList, changeDetectorRef, titleService, overlayWindowService, httpClient, pendingCommandsCollector, exitMagicService) {
         this.engineMagicService = engineMagicService;
         this.componentList = componentList;
@@ -4810,32 +3690,22 @@ class MagicShellComponent {
         this.httpClient = httpClient;
         this.pendingCommandsCollector = pendingCommandsCollector;
         this.exitMagicService = exitMagicService;
-        /**
-         * Root component to be displayed in the window
-         */
         this.RootComponent = null;
         this.magicEngineTerminated = false;
         this.initialize();
         this.setTitle();
     }
-    /**
-     * Before-unload event listener
-     * @param event
-     */
     onBeforeUnload(event) {
         if (this.engineMagicService.TransCacheExists()) {
-            // Show the confirmation box before unloading the browser
             event.returnValue = 'Are you sure?';
             return 'Are you sure?';
         }
         else {
-            // terminate the magic server context using fetch API with keep-alive
             this.engineMagicService.TerminateContextUsingFetchAPI();
             this.magicEngineTerminated = true;
         }
     }
     onUnload(event) {
-        // Chrome provides an opportunity to terminate the context after user approves the browser unload alert
         if (!this.magicEngineTerminated)
             this.engineMagicService.TerminateContextUsingFetchAPI();
     }
@@ -4846,26 +3716,13 @@ class MagicShellComponent {
     setViewContainerRef(vcRef) {
         this.overlayWindowsContainerViewRef = vcRef;
     }
-    /**
-     * Initialization of Magic mechanisms
-     */
     initialize() {
         this.registerUICommands();
     }
-    /**
-     * Set the title
-     */
     setTitle() {
         const newTitle = this.componentList.title;
         this.titleService.setTitle(newTitle);
     }
-    /**
-     * Set the component according to requested form
-     * @param formName Name of the form to open
-     * @param taskId Id of opening task
-     * @param taskDescription TODO
-     * @param isModal whether modal window is being opened
-     */
     setComponent(formName, taskId, taskDescription, isModal) {
         this.pendingCommandsCollector.startCollecting();
         if (isModal) {
@@ -4877,9 +3734,6 @@ class MagicShellComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    /**
-     * @ignore
-     */
     registerUICommands() {
         this.engineMagicService.refreshDom.pipe(filter(command => command.TaskTag === '0'))
             .subscribe(command => {
@@ -4891,10 +3745,6 @@ class MagicShellComponent {
             GuiInteractiveExecutor.executeInteractiveCommand(null, command, this.overlayWindowService);
         });
     }
-    /**
-     * Execute commands received from the Magic WebClient engine
-     * @param command
-     */
     executeCommand(command) {
         switch (command.CommandType) {
             case CommandType.OPEN_FORM:
@@ -4909,7 +3759,7 @@ class MagicShellComponent {
                     this.RootComponentParameters = {};
                     this.changeDetectorRef.detectChanges();
                 }
-                else { // Close modal window
+                else {
                     this.overlayWindowService.close(command.str);
                     this.changeDetectorRef.detectChanges();
                 }
@@ -4927,39 +3777,38 @@ class MagicShellComponent {
                 if (this.exitMagicService)
                     this.exitMagicService.exitMagic();
                 break;
+            case CommandType.SHOW_HTML_ERROR:
+                window.document.write(command.str);
+                break;
         }
     }
 }
-/** @nocollapse */ 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)); };
-/** @nocollapse */ 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([
-        // ExitMagicService
-        ])], 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    }"] });
-/*@__PURE__*/ (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',
-                providers: [
-                // ExitMagicService
-                ],
+                providers: [],
                 template: `
     <div #magicRoot>
       <ndc-dynamic
@@ -5011,7 +3860,7 @@ class MagicShellComponent {
     }
   `]
             }]
-    }], 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,
@@ -5026,25 +3875,19 @@ class MagicShellComponent {
             args: ['window:unload', ['$event']]
         }] }); })();
 
-/**
- * @ignore
- */
 const CHECKBOX_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MagicCheckboxControlValueAccessor),
     multi: true,
 };
-/**
- * Value accessor for Checkbox without a FormControl
- */
 class MagicCheckboxControlValueAccessor extends CheckboxControlValueAccessor {
 }
-/** @nocollapse */ MagicCheckboxControlValueAccessor.ɵfac = function MagicCheckboxControlValueAccessor_Factory(t) { return ɵMagicCheckboxControlValueAccessor_BaseFactory(t || MagicCheckboxControlValueAccessor); };
-/** @nocollapse */ 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 = /*@__PURE__*/ ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
+MagicCheckboxControlValueAccessor.ɵfac = function MagicCheckboxControlValueAccessor_Factory(t) { return ɵMagicCheckboxControlValueAccessor_BaseFactory(t || MagicCheckboxControlValueAccessor); };
+MagicCheckboxControlValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: MagicCheckboxControlValueAccessor, selectors: [["input", "type", "checkbox", "magic", "", 3, "formControlName", "", 3, "no-form-control", ""], ["input", "type", "checkbox", "magic", "", 3, "formControl", ""], ["input", "type", "checkbox", "magic", "", 3, "ngModel", ""]], hostBindings: function MagicCheckboxControlValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("change", function MagicCheckboxControlValueAccessor_change_HostBindingHandler($event) { return ctx.onChange($event.target.checked); })("blur", function MagicCheckboxControlValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); });
+    } }, features: [i0.ɵɵProvidersFeature([CHECKBOX_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
+const ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
+(function () { i0.ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -5057,25 +3900,19 @@ const ɵMagicCheckboxControlValueAccessor_BaseFactory = /*@__PURE__*/ ɵɵgetInh
             }]
     }], null, null); })();
 
-/**
- * @ignore
- */
 const MAGIC_DEFAULT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MagicDefaultValueAccessor),
     multi: true
 };
-/**
- * @ignore
- */
 class MagicDefaultValueAccessor extends DefaultValueAccessor {
 }
-/** @nocollapse */ MagicDefaultValueAccessor.ɵfac = function MagicDefaultValueAccessor_Factory(t) { return ɵMagicDefaultValueAccessor_BaseFactory(t || MagicDefaultValueAccessor); };
-/** @nocollapse */ 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 = /*@__PURE__*/ ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicDefaultValueAccessor, [{
+MagicDefaultValueAccessor.ɵfac = function MagicDefaultValueAccessor_Factory(t) { return ɵMagicDefaultValueAccessor_BaseFactory(t || MagicDefaultValueAccessor); };
+MagicDefaultValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: MagicDefaultValueAccessor, selectors: [["input", "magic", "", 3, "type", "checkbox", 3, "formControlName", "", 3, "no-form-control", ""], ["textarea", "magic", "", 3, "formControlName", "", 3, "noFormControl", "", 3, "no-form-control", ""]], hostBindings: function MagicDefaultValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("input", function MagicDefaultValueAccessor_input_HostBindingHandler($event) { return ctx._handleInput($event.target.value); })("blur", function MagicDefaultValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); })("compositionstart", function MagicDefaultValueAccessor_compositionstart_HostBindingHandler() { return ctx._compositionStart(); })("compositionend", function MagicDefaultValueAccessor_compositionend_HostBindingHandler($event) { return ctx._compositionEnd($event.target.value); });
+    } }, exportAs: ["magic"], features: [i0.ɵɵProvidersFeature([MAGIC_DEFAULT_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
+const ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
+(function () { i0.ɵsetClassMetadata(MagicDefaultValueAccessor, [{
         type: Directive,
         args: [{
                 selector: `
@@ -5093,25 +3930,19 @@ const ɵMagicDefaultValueAccessor_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFa
             }]
     }], null, null); })();
 
-/**
- * Directive for checkboxes which should not have a form control
- */
 class CheckboxNoFormControlMagicDirective {
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
-    /**
-     * Handle the 'Checkbox' change event - pass it to the Magic engine
-     */
     onChange($event) {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
 }
-/** @nocollapse */ CheckboxNoFormControlMagicDirective.ɵfac = function CheckboxNoFormControlMagicDirective_Factory(t) { return new (t || CheckboxNoFormControlMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-/** @nocollapse */ 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); });
     } } });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `
@@ -5123,25 +3954,19 @@ class CheckboxNoFormControlMagicDirective {
             args: ['change', ['$event']]
         }] }); })();
 
-/**
- * Directive for non-checkbox input controls which do not have a form control
- */
 class InputNoFormControlMagicDirective {
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
-    /**
-     * Handles the 'change' event - pass it to the Magic engine
-     */
     onChange($event) {
         this.magicDirective.task.setInputTextValue(this.magicDirective.id, this.magicDirective.rowId, event.srcElement.value);
     }
 }
-/** @nocollapse */ InputNoFormControlMagicDirective.ɵfac = function InputNoFormControlMagicDirective_Factory(t) { return new (t || InputNoFormControlMagicDirective)(ɵɵdirectiveInject(MagicDirective)); };
-/** @nocollapse */ 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); });
     } } });
-/*@__PURE__*/ (function () { ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
+(function () { i0.ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `input[magic]:([noFormControl]):not([type=checkbox]),
@@ -5157,14 +3982,6 @@ const DATE_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => DateValueAccessor),
     multi: true
 };
-/**
- * The accessor for writing a value and listening to changes on a date input element
- *
- *  ### Example
- *  `<input type="date" name="birthday" ngModel dateInput>`
- *  OR
- *  `<input type="date" formControlName="birthday" dateInput>`
- */
 class DateValueAccessor {
     constructor(renderer, elementRef) {
         this.renderer = renderer;
@@ -5172,7 +3989,6 @@ class DateValueAccessor {
         this.onChange = (_) => { };
         this.onTouched = () => { };
     }
-    /** Writes a new value to the element (model -> view) */
     writeValue(value) {
         if (!value) {
             this.renderer.setProperty(this.elementRef.nativeElement, "value", null);
@@ -5180,32 +3996,29 @@ class DateValueAccessor {
         }
         this.renderer.setProperty(this.elementRef.nativeElement, "valueAsDate", new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())));
     }
-    /** Registers a callback function, called when value changes (view -> model) */
     registerOnChange(fn) {
         this.onChange = v => fn(v instanceof Date
             ? new Date(v.getUTCFullYear(), v.getUTCMonth(), v.getUTCDate())
             : v);
     }
-    /** Registers a callback function, called when the control is blurred */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    /** Enables or disables the element when the control status changes */
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
 }
-/** @nocollapse */ DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ElementRef)); };
-/** @nocollapse */ 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])] });
-/*@__PURE__*/ (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: [{
@@ -5213,25 +4026,12 @@ class DateValueAccessor {
             args: ["blur", []]
         }] }); })();
 
-/**
- * Responsible for connecting HTML elements to the Magic WebClient engine showing it is not Magic Control but a Dummy control which is used to notify only receeive focus event for now
- */
 class NonMagicControlDirective {
-    /**
-     *
-     * @param _task The task service
-     * @param element The element for which the directive is applied
-     * @param renderer Renderer for the element
-     * @param vcRef
-     */
     constructor(_task, element, renderer, vcRef) {
         this._task = _task;
         this.element = element;
         this.renderer = renderer;
         this.vcRef = vcRef;
-        /**
-         * Collection of event handlers for this element
-         */
         this.eventHandlers = {};
         this.eventsOnlyVal = false;
         this.htmlElement = this.element.nativeElement;
@@ -5241,52 +4041,35 @@ class NonMagicControlDirective {
         this.selector = 'NonMagicControl';
     }
     ;
-    /**
-     * Get the task service
-     * @returns
-     */
     get task() {
         return this._task;
     }
-    /**
-     * Register to the events this element may need to handle
-     */
     regEvents() {
-        // Handle events for which event handler may be removed and restored
         this.eventHandlers['focusin'] = this.OnFocus.bind(this);
         Object.keys(this.eventHandlers).forEach((key) => {
             this.focusUnlistener = this.renderer.listen(this.htmlElement, key, this.eventHandlers[key]);
         });
     }
-    /**
-     * Handle focus event
-     */
     OnFocus() {
         this.task.insertEvent(getGuiEventObj('focusOnNonMagicControl', "", -1));
         event.cancelBubble = true;
     }
-    /**
-     * Initialize this object
-     */
     ngOnInit() {
         this.regEvents();
     }
 }
-/** @nocollapse */ NonMagicControlDirective.ɵfac = function NonMagicControlDirective_Factory(t) { return new (t || NonMagicControlDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef)); };
-/** @nocollapse */ NonMagicControlDirective.ɵdir = ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: ["NonMagicControl", "magic"] } });
-/*@__PURE__*/ (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']
         }] }); })();
 
-/**
- * @ignore
- */
 const decs = [
     MagicDirective,
     CheckboxMagicDirective,
@@ -5317,9 +4100,6 @@ const decs = [
     MagicFocusDirective,
     MagicViewContainerRef
 ];
-/**
- * @ignore
- */
 class MagicModule {
     static forRoot() {
         return {
@@ -5334,17 +4114,16 @@ class MagicModule {
         };
     }
 }
-/** @nocollapse */ MagicModule.ɵmod = ɵɵdefineNgModule({ type: MagicModule });
-/** @nocollapse */ 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,
-            //ThemeModule,
             RouterModule,
             DynamicModule,
             HttpClientModule
         ]] });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
         CheckboxMagicDirective,
         CheckboxNoFormControlMagicDirective,
         InputNoFormControlMagicDirective,
@@ -5374,7 +4153,6 @@ class MagicModule {
         MagicViewContainerRef], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        //ThemeModule,
         RouterModule,
         DynamicModule,
         HttpClientModule], exports: [MagicDirective,
@@ -5405,7 +4183,7 @@ class MagicModule {
         NonMagicControlDirective,
         MagicFocusDirective,
         MagicViewContainerRef] }); })();
-/*@__PURE__*/ (function () { ɵsetClassMetadata(MagicModule, [{
+(function () { i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
         args: [{
                 declarations: [...decs],
@@ -5415,12 +4193,10 @@ class MagicModule {
                     CommonModule,
                     FormsModule,
                     ReactiveFormsModule,
-                    //ThemeModule,
                     RouterModule,
                     DynamicModule,
                     HttpClientModule
                 ],
-                //Customizable providers
                 providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
             }]
     }], null, null); })();
@@ -5508,7 +4284,7 @@ class MgDateAdapter extends NativeDateAdapter {
             this.mgdtfmt = this.task.mgInputDateFormat;
         if (displayFormat === 'input') {
             if (this.mgdtfmt == null)
-                this.mgdtfmt = 'M/d/yyyy'; //default format
+                this.mgdtfmt = 'M/d/yyyy';
             return formatDate(date, this.mgdtfmt, this.locale);
         }
         else {
@@ -5516,19 +4292,16 @@ class MgDateAdapter extends NativeDateAdapter {
         }
     }
 }
-/** @nocollapse */ MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(ɵɵinject(Platform), ɵɵinject(TaskMagicService)); };
-/** @nocollapse */ MgDateAdapter.ɵprov = ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
-/*@__PURE__*/ (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 },
     { provide: MAT_DATE_FORMATS, useValue: MG_FORMATS }
 ];
-/**
- * Magic service providers
- */
 const basicMagicProviders = [
     MagicServices,
     TaskMagicService,
@@ -5542,18 +4315,7 @@ const magicProviders = [
     TableMagicService
 ];
 
-/**
- * @ignore
- */
-///////////////////////////////////////////////////////////
-// class to hold gui-related helper methods
-///////////////////////////////////////////////////////////
 class utils {
-    ///////////////////////////////////////////////////////////
-    // Add magic child control to the supplied array.
-    // Recursive, and checks children even if they are not magic controls.
-    // Magic controls are controls which have a magic directive attached to them.
-    ///////////////////////////////////////////////////////////
     static addChildren(parent, children, selector) {
         for (var i = 0; i < parent.children.length; i++) {
             if (typeof parent.children[i].attributes[selector] !== "undefined") {
@@ -5562,9 +4324,6 @@ class utils {
             this.addChildren(parent.children[i], children, selector);
         }
     }
-    ///////////////////////////////////////////////////////////
-    // Calculate the distance between the control and the supplied x,y coordinates
-    ///////////////////////////////////////////////////////////
     static getDistance(control, x, y) {
         let left = control.clientLeft, top = control.clientTop;
         let dx, dy;
@@ -5591,9 +4350,6 @@ class utils {
         const ret = (dx * dx + dy * dy);
         return ret;
     }
-    ///////////////////////////////////////////////////////////
-    //
-    ///////////////////////////////////////////////////////////
     static getDimentions(el) {
         let xPos = 0;
         let yPos = 0;
@@ -5601,14 +4357,12 @@ class utils {
         let height = el.height;
         while (el) {
             if (el.tagName == "BODY") {
-                // deal with browser quirks with body/window/document and page scroll
                 let xScroll = el.scrollLeft || document.documentElement.scrollLeft;
                 let yScroll = el.scrollTop || document.documentElement.scrollTop;
                 xPos += (el.offsetLeft - xScroll + el.clientLeft);
                 yPos += (el.offsetTop - yScroll + el.clientTop);
             }
             else {
-                // for all other non-BODY elements
                 xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
                 yPos += (el.offsetTop - el.scrollTop + el.clientTop);
             }
@@ -5623,9 +4377,6 @@ class utils {
     }
 }
 
-/**
- * @ignore
- */
 class ModalFormDefinition {
     constructor() {
         this.taskId = "";
@@ -5634,9 +4385,5 @@ class ModalFormDefinition {
     }
 }
 
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_DEFAULT_VALUE_ACCESSOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
 //# sourceMappingURL=magic-xpa-angular.js.map