@magic-xpa/angular 4.800.0-dev480.20 → 4.800.0-dev480.200

package/bundles/magic-xpa-angular.umd.js

@@ -296,21 +296,16 @@
         return value;
     }
 
-    /**
-     * @ignore
-     */
     var ControlMetadata = /** @class */ (function () {
         function ControlMetadata() {
             this.properties = new Map();
             this.classesMap = new Map();
             this.stylesMap = new Map();
-            // user properties
             this.userProperties = new Map();
             this.customValidators = new Map();
         }
         ControlMetadata.prototype.setClass = function (key, value) {
             var e_1, _a;
-            // for no-control - hold the name of the class to be removed later
             if (this.classesMap.has(key)) {
                 this.removedClass = this.classesMap.get(key);
             }
@@ -336,14 +331,9 @@
         };
         return ControlMetadata;
     }());
-    /**
-     * @ignore
-     */
     var ControlsMetadata = /** @class */ (function () {
         function ControlsMetadata() {
-            //values of control
             this.values = new Map();
-            // dictionary of controls with there properties
             this.ControlsProperties = new Map();
             this.isCreated = false;
             this.isEditing = false;
@@ -361,8 +351,6 @@
             return this.ControlsProperties.get(controlId);
         };
         ControlsMetadata.prototype.update = function (obj) {
-            //should we keep the values here ?
-            //this.values = obj.ControlsValues;
             var props = obj.ControlsMetaData;
             for (var controlName in props) {
                 if (!this.ControlsProperties.has(controlName))
@@ -392,16 +380,13 @@
         };
         return ControlsMetadata;
     }());
-    /**
-     * @ignore
-     */
     var Records = /** @class */ (function () {
         function Records() {
             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;
         }
         Records.prototype.getRow = function (dvRowId) {
             return this.list[dvRowId + this.recordsBeforeCurrentView];
@@ -425,24 +410,14 @@
             }
             return false;
         };
-        /*
-        * for row editing
-        * */
         Records.prototype.startRowEditing = function (guiRowId) {
             if (guiRowId < this.list.length && this.data.has(guiRowId))
                 this.data.get(guiRowId).isEditing = true;
         };
-        /*
-        * stop row editing on row Id
-        * */
         Records.prototype.stopRowEditing = function (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
-        * */
         Records.prototype.isRowInRowEditing = function (guiRowId) {
             if (+guiRowId < this.list.length) {
                 if (!this.data.has(+guiRowId) || util.isNullOrUndefined(this.data.get(+guiRowId)))
@@ -482,7 +457,6 @@
         Records.prototype.updateSize = function (len) {
             if (this.list.length != len) {
                 if (len < this.list.length) {
-                    //remove rows
                     for (var i = len; i < this.list.length; i++) {
                         this.data.delete(i);
                     }
@@ -491,10 +465,6 @@
                 this.sizeUpdated = true;
             }
         };
-        /**
-         * crears data for the first record
-         * @param template
-         */
         Records.prototype.clearFirstTableRecord = function (template) {
             if (this.list.length >= 1) {
                 for (var key in template) {
@@ -533,16 +503,11 @@
         HtmlClasses["HintColor"] = "hintcolor";
     })(exports.HtmlClasses || (exports.HtmlClasses = {}));
 
-    /**
-     * @ignore
-     */
     var EngineMagicService = /** @class */ (function () {
         function EngineMagicService() {
             this.magicBridge = engine.MagicBridge;
             this.isStub = false;
-            // true when user is logged in magic
             this.isLoggedIn = false;
-            //TODO - unregister
             this.refreshDom = new rxjs.Subject();
             this.interactiveCommands = new rxjs.Subject();
         }
@@ -604,6 +569,9 @@
         EngineMagicService.prototype.GetControlPictureMask = function (taskId, controlName) {
             return this.magicBridge.GetControlPictureMask(taskId, controlName);
         };
+        EngineMagicService.prototype.GetFormattedValue = function (taskId, controlName, value) {
+            return this.magicBridge.GetFormattedValue(taskId, controlName, value);
+        };
         EngineMagicService.prototype.ValidateControlValue = function (taskId, controlName, value) {
             return this.magicBridge.ValidateControlValue(taskId, controlName, value);
         };
@@ -611,7 +579,6 @@
             return this.magicBridge.GetFldRanges(taskId, controlName);
         };
         EngineMagicService.prototype.saveData = function (data) {
-            //this.magicBridge.saveData(data);
         };
         EngineMagicService.prototype.getIsLoggedIn = function () {
             return this.isLoggedIn;
@@ -627,26 +594,17 @@
         };
         return EngineMagicService;
     }());
-    /** @nocollapse */ EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
-    /** @nocollapse */ EngineMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
+    EngineMagicService.ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
+    EngineMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac });
+    (function () {
         i0.ɵsetClassMetadata(EngineMagicService, [{
                 type: i0.Injectable
             }], null, null);
     })();
 
-    /**
-     * Manages the list of components in a project, and the project title
-     */
     var ComponentListMagicService = /** @class */ (function () {
         function ComponentListMagicService() {
-            /**
-             * Map of project components
-             */
             this.components = new Map();
-            /**
-             * Map of project dialogs
-             */
             this.dialogs = new Map();
             this.lazyLoadModulesMap = null;
         }
@@ -660,11 +618,6 @@
                 data = this.components.get(name);
             return data;
         };
-        /**
-         * Return a component according to name
-         * @param name Name of requested component
-         * @returns The requested component
-         */
         ComponentListMagicService.prototype.getComponent = function (name, mustHaveData) {
             if (mustHaveData === void 0) { mustHaveData = true; }
             var data = this.getData(name, mustHaveData);
@@ -676,30 +629,17 @@
                 this.components.set(key, data);
             }
         };
-        /**
-        * Return a component according to name
-        * @param name Name of requested component
-        * @returns The requested component
-        */
         ComponentListMagicService.prototype.getModuleRef = function (name) {
             var 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
-         */
         ComponentListMagicService.prototype.getLazyLoadModuleData = function (name) {
             return (this.lazyLoadModulesMap != null && this.lazyLoadModulesMap.hasOwnProperty(name)) ? this.lazyLoadModulesMap[name] : null;
         };
         return ComponentListMagicService;
     }());
 
-    /**
-     * @ignore
-     */
     var StylesMapManager = /** @class */ (function () {
         function StylesMapManager() {
         }
@@ -714,29 +654,368 @@
                     style = mscorelib.NString.Format(value.toString(), magicValue);
                 }
             }
-            return style;
+            return style;
+        };
+        return StylesMapManager;
+    }());
+    StylesMapManager.StylesMap = new Map([
+        [utils$1.MagicProperties.LineDivider, new Map([[true, "solid"], [false, "hidden"]])],
+        [utils$1.MagicProperties.ImageFile, "url('\{0}\')"],
+        [utils$1.MagicProperties.Wallpaper, "url('\{0}\')"]
+    ]);
+    StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
+        [utils$1.MagicProperties.LineDivider, "border-bottom-style"],
+        [utils$1.MagicProperties.ImageFile, "background-image"],
+        [utils$1.MagicProperties.Wallpaper, "background-image"]
+    ]);
+
+    var CommandsCollectorMagicService = /** @class */ (function () {
+        function CommandsCollectorMagicService(magic) {
+            this.magic = magic;
+            this.count = 0;
+            this.commands = new mscorelib.List();
+            this.subscription = null;
+        }
+        CommandsCollectorMagicService.prototype.startCollecting = function () {
+            var _this = this;
+            this.count++;
+            utils$1.Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
+            if (this.subscription === null) {
+                this.subscription = this.magic.refreshDom
+                    .subscribe(function (command) {
+                    _this.commands.push(command);
+                });
+            }
+        };
+        CommandsCollectorMagicService.prototype.stopCollecting = function () {
+            this.count--;
+            utils$1.Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
+            if (this.count === 0) {
+                this.subscription.unsubscribe();
+                this.subscription = null;
+            }
+        };
+        CommandsCollectorMagicService.prototype.GetCommands = function (taskId) {
+            var _this = this;
+            var commands = this.commands.filter(function (command) { return command.TaskTag === taskId; });
+            commands.forEach(function (command) { _this.commands.Remove(command); });
+            return commands;
+        };
+        return CommandsCollectorMagicService;
+    }());
+    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: i0.Injectable
+            }], function () { return [{ type: EngineMagicService }]; }, null);
+    })();
+
+    var RouteCommand = /** @class */ (function () {
+        function RouteCommand() {
+        }
+        return RouteCommand;
+    }());
+    var RouterCommandsMagicService = /** @class */ (function () {
+        function RouterCommandsMagicService() {
+            this.pendingRouteCommands = [];
+        }
+        RouterCommandsMagicService.prototype.AddRouteCommand = function (routeCommand) {
+            this.pendingRouteCommands.push(routeCommand);
+        };
+        RouterCommandsMagicService.prototype.ExecuteNextCommand = function () {
+            var pendingRouteCommand = this.pendingRouteCommands.shift();
+            if (!util.isNullOrUndefined(pendingRouteCommand)) {
+                pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
+            }
+        };
+        return RouterCommandsMagicService;
+    }());
+    RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
+    RouterCommandsMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
+    (function () {
+        i0.ɵsetClassMetadata(RouterCommandsMagicService, [{
+                type: i0.Injectable
+            }], null, null);
+    })();
+
+    var SubformMagicService = /** @class */ (function () {
+        function SubformMagicService(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;
+        }
+        SubformMagicService.prototype.mgGetComp = function (subformName) {
+            if (subformName in this.subformsDict) {
+                var formName = this.subformsDict[subformName].formName;
+                if (formName)
+                    return this.componentList.getComponent(formName);
+            }
+            return null;
+        };
+        SubformMagicService.prototype.mgGetParameters = function (subformName) {
+            if (subformName in this.subformsDict) {
+                return this.subformsDict[subformName].parameters;
+            }
+            else
+                return "";
+        };
+        SubformMagicService.prototype.deleteSubformComp = function (subformControlName, formName) {
+            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+                if (this.subformsDict[subformControlName].formName === formName) {
+                    this.subformsDict[subformControlName] = {};
+                    this.task.refreshView();
+                }
+            }
+        };
+        SubformMagicService.prototype.addSubformComp = function (subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
+            var _this = this;
+            this.pendingCommandsCollector.startCollecting();
+            var refreshNeeded = false;
+            if (util.isNullOrUndefined(routerPath)) {
+                if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+                    if (this.subformsDict[subformControlName].formName === formName) {
+                        this.subformsDict[subformControlName] = {};
+                        this.task.refreshView();
+                    }
+                }
+                var moduleRef_1 = this.componentListMagicService.getModuleRef(formName);
+                if (moduleRef_1 == null) {
+                    var lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(formName);
+                    if (lazyLoadModule != null) {
+                        this.loader
+                            .load(lazyLoadModule.modulePath + "#" + lazyLoadModule.moduleName)
+                            .then(function (moduleFactory) {
+                            moduleRef_1 = moduleFactory.create(_this.injector);
+                            _this.subformsDict[subformControlName] = {
+                                formName: formName,
+                                parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                            };
+                            _this.task.refreshView();
+                        });
+                    }
+                }
+                else {
+                    this.subformsDict[subformControlName] = {
+                        formName: formName,
+                        parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                    };
+                    refreshNeeded = true;
+                }
+            }
+            else {
+                if (inDefaultOutlet)
+                    subformControlName = "primary";
+                var routeParams = new mscorelib.List();
+                routeParams.push(routerPath);
+                if (params !== null) {
+                    routeParams = routeParams.concat(params);
+                }
+                var 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();
+        };
+        SubformMagicService.prototype.ExecuteRouteCommand = function (routeCommand) {
+            var _a;
+            var reusingComponent = false;
+            var currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
+            var relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
+            if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
+                currentSubformMagicService.router.navigate([{ outlets: (_a = {}, _a[routeCommand.routerOutletName] = null, _a) }], { relativeTo: relativeRoute })
+                    .then(function (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) {
+                    var routeContainer = SubformMagicService.routerContainers[0];
+                    SubformMagicService.routerContainers.shift();
+                    routeContainer.initializeComponent();
+                }
+                else {
+                    currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
+                }
+            }
+        };
+        SubformMagicService.prototype.PerformRouterNavigate = function (routerOutletName, routeParams) {
+            var _a;
+            var relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+            this.router.navigate([{ outlets: (_a = {}, _a[routerOutletName] = routeParams, _a) }], { relativeTo: relativeRoute })
+                .then(function (result) {
+                if (result !== null && !result) {
+                    var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+                    subformMagicService.currentRouteDefinition = null;
+                    SubformMagicService.currentCallerMgSubformServiceRef = null;
+                    subformMagicService.pendingCommandsCollector.stopCollecting();
+                    subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
+                }
+            });
+        };
+        SubformMagicService.prototype.init = function () {
+            var _this = this;
+            var pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
+            if (pendingCommands.length > 0) {
+                pendingCommands.forEach(function (command) { _this.task.executeCommand(command); });
+                this.task.refreshView();
+            }
+            this.pendingCommandsCollector.stopCollecting();
+        };
+        SubformMagicService.prototype.refreshView = function () {
+            this.task.refreshView();
+        };
+        SubformMagicService.getRelativeRoute = function (sendActivatedRoute) {
+            var 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;
+        };
+        return SubformMagicService;
+    }());
+    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: i0.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);
+    })();
+
+    var RouterContainerMagicComponent = /** @class */ (function () {
+        function RouterContainerMagicComponent(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;
+        }
+        Object.defineProperty(RouterContainerMagicComponent, "LastRoute", {
+            get: function () {
+                return RouterContainerMagicComponent.lastRoute;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RouterContainerMagicComponent.prototype.ngOnInit = function () {
+            var outletname = this.activatedRoute.outlet;
+            var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+            var 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();
+            }
+        };
+        RouterContainerMagicComponent.prototype.insertRouteEvent = function (currentActiveRoute) {
+            var guiEvent = engine.getGuiEventObj('RouterNavigate', null, 0);
+            guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
+            if (currentActiveRoute.snapshot.outlet !== 'primary')
+                guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
+            var calcRouterPath = currentActiveRoute.routeConfig.path;
+            if (calcRouterPath.length > 0) {
+                var routerPath = calcRouterPath;
+                var tokens = utils$1.StrUtil.tokenize(routerPath, "/:");
+                guiEvent.RouterPath = tokens[0];
+                guiEvent.RouterParams = new mscorelib.List();
+                for (var i = 1; i < tokens.length; i++) {
+                    guiEvent.RouterParams.push(this.activatedRoute.snapshot.params[tokens[i]]);
+                }
+            }
+            this.containerTaskService.insertEvent(guiEvent);
+        };
+        RouterContainerMagicComponent.prototype.initializeComponent = function () {
+            var _this = this;
+            var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+            if (subformMagicService.currentRouteDefinition !== null) {
+                var comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
+                this.componentRef = this.viewContainerRef.createComponent(componentFactory);
+                Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
+                var myActiveRoute_1 = SubformMagicService.getRelativeRoute(this.activatedRoute);
+                var routeParams = utils$1.StrUtil.tokenize(myActiveRoute_1.snapshot.routeConfig.path, "/:");
+                subformMagicService.routesDict[myActiveRoute_1.snapshot.outlet] = routeParams[0];
+                this.parentMgSubformService = subformMagicService;
+                subformMagicService.currentRouteDefinition = null;
+                SubformMagicService.currentCallerMgSubformServiceRef = null;
+                var ignoreParamChange_1 = true;
+                myActiveRoute_1.paramMap.subscribe(function (params) {
+                    if (!ignoreParamChange_1)
+                        _this.insertRouteEvent(myActiveRoute_1);
+                    ignoreParamChange_1 = false;
+                });
+                this.parentMgSubformService.refreshView();
+                this.routerCommandsMagicService.ExecuteNextCommand();
+            }
         };
-        return StylesMapManager;
+        RouterContainerMagicComponent.prototype.ngOnDestroy = function () {
+            if (this.componentRef != null) {
+                this.componentRef.instance.task.close();
+                var currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+                this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
+                RouterContainerMagicComponent.lastRoute = this.router.url;
+            }
+        };
+        return RouterContainerMagicComponent;
     }());
-    StylesMapManager.StylesMap = new Map([
-        [utils$1.MagicProperties.LineDivider, new Map([[true, "solid"], [false, "hidden"]])],
-        [utils$1.MagicProperties.ImageFile, "url('\{0}\')"],
-        [utils$1.MagicProperties.Wallpaper, "url('\{0}\')"]
-    ]);
-    StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
-        [utils$1.MagicProperties.LineDivider, "border-bottom-style"],
-        [utils$1.MagicProperties.ImageFile, "background-image"],
-        [utils$1.MagicProperties.Wallpaper, "background-image"]
-    ]);
+    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: i0.Component,
+                args: [{
+                        selector: 'magic-route-outlet',
+                        template: "\n  "
+                    }]
+            }], 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);
+    })();
 
-    /**
-     * @ignore
-     */
     var GuiInteractiveExecutor = /** @class */ (function () {
         function GuiInteractiveExecutor() {
         }
         GuiInteractiveExecutor.prototype.Run = function () {
-            // Sets the currentContextID
             try {
                 switch (this.command._commandType) {
                     case gui.InteractiveCommandType.GET_VALUE:
@@ -763,11 +1042,13 @@
                     case gui.InteractiveCommandType.REFRESH_PAGE:
                         this.OnRefreshPage();
                         break;
+                    case gui.InteractiveCommandType.GET_LAST_ROUTE:
+                        this.OnGetLastRoute();
+                        break;
                 }
             }
             catch (ex) {
                 throw ex;
-                //want to see all the exceptions for now
             }
         };
         GuiInteractiveExecutor.executeInteractiveCommand = function (task, guiIntactiveCommand, overlayService) {
@@ -823,6 +1104,9 @@
             else
                 this.command._boolVal = this.task.Records.list[guiRowIndex].isEditing;
         };
+        GuiInteractiveExecutor.prototype.OnGetLastRoute = function () {
+            this.command.resultString = RouterContainerMagicComponent.LastRoute;
+        };
         return GuiInteractiveExecutor;
     }());
 
@@ -848,30 +1132,18 @@
         i0.Output()
     ], exports.BaseMagicOverlayContainer);
 
-    /**
-     * This is a base class for the magic confirm components
-     */
     var BaseMagicConfirmComponent = /** @class */ (function () {
         function BaseMagicConfirmComponent() {
-            /**
-             * 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 i0.EventEmitter();
         }
-        /**
-         * raises close Event
-         * @param result true when OK is pressed and false when cancel is pressed
-         *
-         */
         BaseMagicConfirmComponent.prototype.OnClose = function (result) {
             this.onClose.emit(result);
         };
         return BaseMagicConfirmComponent;
     }());
-    /** @nocollapse */ BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-    /** @nocollapse */ 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: [""] });
-    /*@__PURE__*/ (function () {
+    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: i0.Component,
                 args: [{
@@ -888,28 +1160,18 @@
                 }] });
     })();
 
-    /**
-     * This is a base class for the magic alert components
-     */
     var BaseMagicAlertComponent = /** @class */ (function () {
         function BaseMagicAlertComponent() {
-            /**
-             * onClose Event - to be raised when the component is closed
-          
-             */
             this.onClose = new i0.EventEmitter();
         }
-        /**
-         * close magic alert
-         */
         BaseMagicAlertComponent.prototype.OnClose = function () {
             this.onClose.emit();
         };
         return BaseMagicAlertComponent;
     }());
-    /** @nocollapse */ BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-    /** @nocollapse */ 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: [""] });
-    /*@__PURE__*/ (function () {
+    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: i0.Component,
                 args: [{
@@ -926,9 +1188,6 @@
                 }] });
     })();
 
-    /**
-     * Directive for setting focus on element
-     */
     var MagicFocusDirective = /** @class */ (function () {
         function MagicFocusDirective(hostElement) {
             this.hostElement = hostElement;
@@ -938,9 +1197,9 @@
         };
         return MagicFocusDirective;
     }());
-    /** @nocollapse */ MagicFocusDirective.ɵfac = function MagicFocusDirective_Factory(t) { return new (t || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    /** @nocollapse */ MagicFocusDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]] });
-    /*@__PURE__*/ (function () {
+    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: i0.Directive,
                 args: [{
@@ -949,22 +1208,18 @@
             }], function () { return [{ type: i0.ElementRef }]; }, null);
     })();
 
-    /**
-     * Directive for setting  ViewContainerRef on element
-     */
     var MagicViewContainerRef = /** @class */ (function () {
         function MagicViewContainerRef(vcRef, resolver) {
             this.vcRef = vcRef;
             this.resolver = resolver;
-            // For angular 10 -  find the component from the views
             var comp = (this.vcRef._hostView).find(function (v) { return v != null && !util.isNullOrUndefined(v.setViewContainerRef); });
             comp.setViewContainerRef(vcRef);
         }
         return MagicViewContainerRef;
     }());
-    /** @nocollapse */ MagicViewContainerRef.ɵfac = function MagicViewContainerRef_Factory(t) { return new (t || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-    /** @nocollapse */ MagicViewContainerRef.ɵdir = i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]] });
-    /*@__PURE__*/ (function () {
+    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: i0.Directive,
                 args: [{
@@ -975,29 +1230,16 @@
 
     var _c0 = ["overlayContainerWrapper"];
     var MagicOverlayContainerWrapper = /** @class */ (function () {
-        /**
-         *
-         * @param componentFactoryResolver
-         */
         function MagicOverlayContainerWrapper(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 i0.EventEmitter();
         }
-        /**
-         *
-         */
         MagicOverlayContainerWrapper.prototype.ngOnInit = function () {
             var _this = this;
             var moduleRef = this.componentListMagicService.getModuleRef(this.Parameters.MagicFormName);
@@ -1050,17 +1292,13 @@
         };
         return MagicOverlayContainerWrapper;
     }());
-    /**
-     * @ignore
-     * contais data of allowed base components to use
-     */
     MagicOverlayContainerWrapper.allowedBaseComps = new Map([
         [gui.OverlayType.Overlay, { comp: exports.BaseMagicOverlayContainer, error: 'BaseMagicOverlayContainer . Overlay ' }],
         [gui.OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
         [gui.OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
     ]);
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) {
+    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, true);
             }
@@ -1079,7 +1317,7 @@
                 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 () {
+    (function () {
         i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
                 type: i0.Component,
                 args: [{
@@ -1101,17 +1339,10 @@
                 }] });
     })();
 
-    /**
-     * Displays a message-box
-     */
     var confirmationBox = /** @class */ (function () {
         function confirmationBox() {
         }
-        /**
-         * @ignore
-         */
         confirmationBox.isConfirmBox = function (style) {
-            // button format mask is in first nibble from right
             var buttonMode = style & 0x0F;
             var isConfirm = (buttonMode === gui.Styles.MSGBOX_BUTTON_OK_CANCEL) ||
                 (buttonMode === gui.Styles.MSGBOX_BUTTON_ABORT_RETRY_IGNORE) ||
@@ -1120,14 +1351,7 @@
                 (buttonMode === gui.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
-         */
         confirmationBox.convertToExcpectedResultBox = function (style, okWasPressed) {
-            // button format mask is in first nibble from right
             var buttonMode = style & 0x0F;
             var retValue = gui.Styles.MSGBOX_RESULT_OK;
             if (buttonMode === gui.Styles.MSGBOX_BUTTON_OK)
@@ -1144,19 +1368,10 @@
                 retValue = okWasPressed ? gui.Styles.MSGBOX_RESULT_RETRY : gui.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
-         */
         confirmationBox.showConfirmationBox = function (title, message, style) {
             var okWasPressed = false;
             var retValue = gui.Styles.MSGBOX_RESULT_OK;
-            // check if it is confirmation box
             var isConfirm = this.isConfirmBox(style);
-            // the title will be added to the string and we will add new line after the title
             var titleAndString = title + '\n' + '\n' + message;
             if (isConfirm)
                 okWasPressed = confirm(titleAndString);
@@ -1164,7 +1379,6 @@
                 alert(titleAndString);
                 okWasPressed = true;
             }
-            // return the result from the user
             return okWasPressed;
         };
         return confirmationBox;
@@ -1198,38 +1412,18 @@
             i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
         }
     }
-    /**
-     * Creates a modal window for Magic modal window components
-     */
     var MagicOverlayContainer = /** @class */ (function (_super) {
         __extends(MagicOverlayContainer, _super);
-        /**
-         *
-         * @param injector
-         * @param componentFactoryResolver
-         */
         function MagicOverlayContainer(injector, componentFactoryResolver) {
             var _this = _super.call(this) || this;
             _this.injector = injector;
             _this.componentFactoryResolver = componentFactoryResolver;
-            /**
-             *
-             */
             _this.ModalComp = null;
-            /**
-             *
-             */
             _this.ModalCompParameters = {};
             _this.onClose = new i0.EventEmitter();
-            /**
-             *
-             */
             _this.componentRef = null;
             return _this;
         }
-        /**
-         *
-         */
         MagicOverlayContainer.prototype.ngOnInit = function () {
             var factory = this.componentFactoryResolver.resolveComponentFactory(this.ModalComp);
             this.componentRef = this.modalbodyViewContainerRef.createComponent(factory);
@@ -1238,10 +1432,6 @@
         MagicOverlayContainer.prototype.setViewContainerRef = function (vcRef) {
             this.modalbodyViewContainerRef = vcRef;
         };
-        /**
-         * Returns the form name
-         * @returns
-         */
         MagicOverlayContainer.prototype.getText = function () {
             if (this.componentRef !== null) {
                 var comp = this.componentRef.instance;
@@ -1250,10 +1440,6 @@
             else
                 return "";
         };
-        /**
-         * Returns CSS styles for the window
-         * @returns
-         */
         MagicOverlayContainer.prototype.getStyle = function () {
             var styles = {};
             if (this.componentRef != undefined) {
@@ -1270,10 +1456,6 @@
             }
             return styles;
         };
-        /**
-         * Returns the CSS styles for the client area
-         * @returns
-         */
         MagicOverlayContainer.prototype.getClientAreaStyles = function () {
             var styles = {};
             if (this.componentRef != undefined) {
@@ -1289,25 +1471,15 @@
             }
             return styles;
         };
-        /**
-         * Should the title bar be displayed
-         * @returns
-         */
         MagicOverlayContainer.prototype.getShowTitleBar = function () {
             if (this.componentRef != undefined) {
                 var comp = this.componentRef.instance;
                 return comp.ShowTitleBar();
             }
         };
-        /**
-         *
-         */
         MagicOverlayContainer.prototype.OnClose = function () {
             this.onClose.emit();
         };
-        /**
-         * Handles click in the background window
-         */
         MagicOverlayContainer.prototype.OnBackgroundClick = function () {
             var comp = this.componentRef.instance;
             if (comp.ShouldCloseOnBackgroundClick())
@@ -1315,8 +1487,8 @@
         };
         return MagicOverlayContainer;
     }(exports.BaseMagicOverlayContainer));
-    /** @nocollapse */ MagicOverlayContainer.ɵfac = function MagicOverlayContainer_Factory(t) { return new (t || MagicOverlayContainer)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-    /** @nocollapse */ MagicOverlayContainer.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) {
+    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$1, true);
                 i0.ɵɵviewQuery(_c1, true);
@@ -1352,7 +1524,7 @@
                 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}"] });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(MagicOverlayContainer, [{
                 type: i0.Component,
                 args: [{
@@ -1375,10 +1547,6 @@
                 }] });
     })();
 
-    /**
-     * Service managing overlay windows
-     * This is Magic's default provider
-     */
     var OverlayContainerMagicProvider = /** @class */ (function () {
         function OverlayContainerMagicProvider() {
         }
@@ -1387,17 +1555,14 @@
         };
         return OverlayContainerMagicProvider;
     }());
-    /** @nocollapse */ OverlayContainerMagicProvider.ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
-    /** @nocollapse */ OverlayContainerMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
-    /*@__PURE__*/ (function () {
+    OverlayContainerMagicProvider.ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
+    OverlayContainerMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
+    (function () {
         i0.ɵsetClassMetadata(OverlayContainerMagicProvider, [{
                 type: i0.Injectable
             }], null, null);
     })();
 
-    /***
-     * This is sample component for the alert message
-     */
     var MagicAlertComponent = /** @class */ (function (_super) {
         __extends(MagicAlertComponent, _super);
         function MagicAlertComponent() {
@@ -1405,8 +1570,8 @@
         }
         return MagicAlertComponent;
     }(BaseMagicAlertComponent));
-    /** @nocollapse */ MagicAlertComponent.ɵfac = function MagicAlertComponent_Factory(t) { return ɵMagicAlertComponent_BaseFactory(t || MagicAlertComponent); };
-    /** @nocollapse */ 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) {
+    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);
@@ -1430,8 +1595,8 @@
                 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  }"] });
-    var ɵMagicAlertComponent_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInheritedFactory(MagicAlertComponent);
-    /*@__PURE__*/ (function () {
+    var ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent);
+    (function () {
         i0.ɵsetClassMetadata(MagicAlertComponent, [{
                 type: i0.Component,
                 args: [{
@@ -1442,9 +1607,6 @@
             }], null, null);
     })();
 
-    /***
-     * This is sample component for the confirmation box
-     */
     var MagicConfirmationBoxComponent = /** @class */ (function (_super) {
         __extends(MagicConfirmationBoxComponent, _super);
         function MagicConfirmationBoxComponent() {
@@ -1452,8 +1614,8 @@
         }
         return MagicConfirmationBoxComponent;
     }(BaseMagicConfirmComponent));
-    /** @nocollapse */ MagicConfirmationBoxComponent.ɵfac = function MagicConfirmationBoxComponent_Factory(t) { return ɵMagicConfirmationBoxComponent_BaseFactory(t || MagicConfirmationBoxComponent); };
-    /** @nocollapse */ 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) {
+    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);
@@ -1481,8 +1643,8 @@
                 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    }"] });
-    var ɵMagicConfirmationBoxComponent_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
-    /*@__PURE__*/ (function () {
+    var ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent);
+    (function () {
         i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
                 type: i0.Component,
                 args: [{
@@ -1493,51 +1655,28 @@
             }], null, null);
     })();
 
-    /**
-     * Service managing overlay windows
-     * This is Magic's default provider
-     */
-    /**
-     * Service managing alert and confirmation windows
-     * This is Magic's default provider
-     */
     var ConfirmationComponentsMagicProvider = /** @class */ (function () {
         function 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
-         */
         ConfirmationComponentsMagicProvider.prototype.showDefaultConfirmations = function () {
             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
-         */
         ConfirmationComponentsMagicProvider.prototype.getAlertComponent = function () {
             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
-         */
         ConfirmationComponentsMagicProvider.prototype.getConfirmtionComponent = function () {
             return MagicConfirmationBoxComponent;
         };
         return ConfirmationComponentsMagicProvider;
     }());
-    /** @nocollapse */ ConfirmationComponentsMagicProvider.ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
-    /** @nocollapse */ ConfirmationComponentsMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
-    /*@__PURE__*/ (function () {
+    ConfirmationComponentsMagicProvider.ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
+    ConfirmationComponentsMagicProvider.ɵprov = i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
+    (function () {
         i0.ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
                 type: i0.Injectable
             }], null, null);
     })();
 
-    /**
-     * Service managing overlay windows
-     */
     var OverlayWindowService = /** @class */ (function () {
         function OverlayWindowService(componentFactoryResolver, componentList, engineMagicService, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
             this.componentFactoryResolver = componentFactoryResolver;
@@ -1553,7 +1692,6 @@
         };
         OverlayWindowService.prototype.open = function (formName, taskId, taskDescription) {
             var _this = this;
-            // for overlay which are lazy loaded don't find data in component-list
             var comp = this.componentList.lazyLoadModulesMap != null && this.componentList.lazyLoadModulesMap.hasOwnProperty(formName) ? null : this.componentList.getComponent(formName);
             var parameters = { taskIdParam: taskId, taskDescription: taskDescription };
             var componentRef = this.createModalComponent({ MagicFormName: formName, ModalComp: comp, ModalCompParameters: parameters }, this.overlayContainerMagicProvider.getComponent(), gui.OverlayType.Overlay);
@@ -1564,28 +1702,19 @@
             });
         };
         OverlayWindowService.prototype.close = function (commandStr) {
-            // Close the overlay by removing the overlay window from its container
             this.overlayWindowsContainerViewRef.remove();
             this.overlayWindowFocusManager.popDialog();
             var guiEvent1 = engine.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
-         */
         OverlayWindowService.prototype.openConfirmationBox = function (title, msg, style) {
             var _this = this;
-            //show default confirmations
             if (this.confirmationComponentsMagicProvider.showDefaultConfirmations()) {
                 var res = confirmationBox.showConfirmationBox(title, msg, style);
                 this.finishConfirmation(style, res);
             }
             else {
-                //show custom confirmations
                 var comp = confirmationBox.isConfirmBox(style) ? this.confirmationComponentsMagicProvider.getConfirmtionComponent() : this.confirmationComponentsMagicProvider.getAlertComponent();
                 var overlayType = confirmationBox.isConfirmBox(style) ? gui.OverlayType.ConfirmationBox : gui.OverlayType.Alert;
                 var componentRef = this.createModalComponent({ title: title, message: msg }, comp, overlayType);
@@ -1596,21 +1725,11 @@
                 });
             }
         };
-        /**
-         * This method is called on close of the confirmation
-         * @param style Magic style
-         * @param result
-         */
         OverlayWindowService.prototype.finishConfirmation = function (style, result) {
             var guiEvent = engine.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
-         */
         OverlayWindowService.prototype.createModalComponent = function (parameters, component, overlayType) {
             var componentRef;
             var magicModalContainerParameters = {
@@ -1618,11 +1737,9 @@
                 Parameters: parameters,
                 OverlayTypeParam: overlayType
             };
-            // Create the UI component of modal window
             var factory = this.componentFactoryResolver.resolveComponentFactory(MagicOverlayContainerWrapper);
             var 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();
@@ -1630,9 +1747,9 @@
         };
         return OverlayWindowService;
     }());
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ OverlayWindowService.ɵprov = i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: ComponentListMagicService }, { type: EngineMagicService }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }]; }, null);
@@ -1765,103 +1882,45 @@
         return DialogInfo;
     }());
 
-    /**
-     * Main service to connect the UI with the Magic WebCLient
-     */
     var TaskMagicService = /** @class */ (function () {
-        /**
-         *
-         * @param  magic
-         */
         function TaskMagicService(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 rxjs.Subject();
-            /**
-             * @ignore
-             */
             this.detectChanges = new rxjs.Subject();
-            /**
-             * @ignore
-             */
             this.interactiveCommands = new rxjs.Subject();
-            /**
-             * @ignore
-             * This event is emitted when the selected row in a table changes.
-             */
             this.OnSelectedRowChanged = new i0.EventEmitter();
-            /**
-             * @ignore
-             */
             this.customPropertiesSubject = new rxjs.Subject();
-            /**
-             * @ignore
-             */
             this.recordsCountChangeSubject = new rxjs.Subject();
-            /**
-             * @ignore
-             */
             this.oldPageSize = 0;
             this.Records.setGuiTopIndex(0);
             this.mgInputDateFormat = null;
         }
-        /**
-        * returns true if used is logged in
-        * @returns
-        */
         TaskMagicService.prototype.getIsLoggenIn = function () {
             return this.magic.getIsLoggedIn();
         };
         Object.defineProperty(TaskMagicService.prototype, "taskId", {
-            /**
-             * returns the task Id
-             * @returns
-             */
             get: function () {
                 return this._taskId;
             },
-            /**
-             * Sets the task Id
-             * @param value the task id to set
-             */
             set: function (value) {
-                // debugger;
                 this._taskId = value;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TaskMagicService.prototype, "ScreenControlsData", {
-            /**
-             * Returns the task's data in Screen mode
-             * @returns
-             */
             get: function () {
                 return this.Records.list['0'];
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.settemplate = function (value) {
             this.template = value;
         };
-        /**
-         * Builds the FormControl for each and every control
-         */
         TaskMagicService.prototype.buildScreenModeControls = function () {
             var group = new forms.FormGroup({});
             for (var key in this.template) {
@@ -1873,21 +1932,10 @@
             }
             this.ScreenModeControls = group;
         };
-        /**
-         * Is the control a table control
-         * @param id Id of the control
-         * @returns
-         */
         TaskMagicService.prototype.isTableControl = function (id) {
             return this.template[id] == '1';
         };
         TaskMagicService.prototype.getMgInputDateFormat = function () { return this.mgInputDateFormat; };
-        /**
-         * Returns the FormControl of a control
-         * @param guiRowid Id of the requested row
-         * @param id Id of the control
-         * @returns
-         */
         TaskMagicService.prototype.getFormControl = function (guiRowid, id) {
             var c;
             var group = this.isTableControl(id) ? this.formGroups[guiRowid] : this.ScreenModeControls;
@@ -1897,21 +1945,12 @@
             }
             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
-         */
         TaskMagicService.prototype.setInputTextValue = function (controlId, guiRowid, val) {
             this.setValue(controlId, guiRowid, this.ConvertValToNative(controlId, 0, val));
             var fc = this.getFormControl(guiRowid, controlId);
             if (!util.isNullOrUndefined(val))
                 fc.setValue(val);
         };
-        /**
-         * Build the FormControls for a table row
-         * @param  guiRowId Id of the row for which the FormControls are built
-         */
         TaskMagicService.prototype.buildTableRowControls = function (guiRowId) {
             var group = new forms.FormGroup({});
             for (var key in this.template) {
@@ -1923,58 +1962,30 @@
             }
             this.formGroups[guiRowId] = group;
         };
-        /**
-         *
-         * @ignore
-         */
         TaskMagicService.prototype.updateRecordsBeforeCurrentView = function (value) {
             this.Records.recordsBeforeCurrentView = value;
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.setIncludesFirst = function (value) {
             this.Records.includesFirst = value;
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.setIncludesLast = function (value) {
             this.Records.includesLast = value;
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.markRowAsCreated = function (guiRowId) {
             this.Records.markRowAsCreated(guiRowId);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.markRowAsNotCreated = function (guiRowId) {
             this.Records.markRowAsNotCreated(guiRowId);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.startRowEditing = function (guiRowId) {
             this.Records.startRowEditing(guiRowId);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.stopRowEditing = function (guiRowId) {
             this.Records.stopRowEditing(guiRowId);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.isRowInRowEditing = function (guiRowId) {
             return this.Records.isRowInRowEditing(guiRowId);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.setIsEmptyDataView = function (isEmpty) {
             if (this.Records.isEmptyDataView !== isEmpty) {
                 if (isEmpty)
@@ -1984,11 +1995,6 @@
                 this.refreshView();
             }
         };
-        /**
-         * Initialize the service to work with the task
-         * @param taskId Id of the task
-         * @param taskDescription
-         */
         TaskMagicService.prototype.initTask = function (taskId, taskDescription) {
             var _this = this;
             this.Records.createFirst();
@@ -2001,71 +2007,39 @@
                 this.settemplate(taskDescription);
             }
             this.buildScreenModeControls();
-            // remove previous subscriptions
             if (!util.isNullOrUndefined(this.subscribeRefreshDom))
                 this.subscribeRefreshDom.unsubscribe();
             if (!util.isNullOrUndefined(this.subscribeInteractiveCommands))
                 this.subscribeInteractiveCommands.unsubscribe();
             this.subscribeRefreshDom = this.magic.refreshDom.pipe(operators.filter(function (command) { return command.TaskTag === _this.taskId; }))
                 .subscribe(function (command) {
-                // console.log("Task " + command.TaskTag + "command " + command.CommandType);
                 _this.executeCommand(command);
             });
             this.subscribeInteractiveCommands = this.magic.interactiveCommands
                 .pipe(operators.filter(function (command) { return command.TaskTag === _this.taskId; }))
                 .subscribe(function (command) {
-                // console.log("Task " + command.TaskTag + "command " + command.CommandType);
                 _this.executeInteractiveCommand(command);
             });
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.refreshView = function () {
             this.detectChanges.next('');
         };
-        /**
-         * Insert an event to the Magic WebClient event queue
-         * @param guiEvent The event to insert
-         */
         TaskMagicService.prototype.insertEvent = function (guiEvent) {
             guiEvent.TaskID = this.taskId;
             this.magic.insertEvent(guiEvent);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.GetControlPictureMask = function (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
-         */
         TaskMagicService.prototype.ValidateControlValue = function (controlName, value) {
             return this.magic.ValidateControlValue(this.taskId, controlName, value);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.GetRangedValue = function (controlName, value) {
             return this.magic.GetRangedValue(this.taskId, controlName, value);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.GetFldRanges = function (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
-         */
         TaskMagicService.prototype.getProperty = function (controlId, prop, guiRowId) {
             if (util.isNullOrUndefined(guiRowId))
                 guiRowId = '0';
@@ -2079,9 +2053,6 @@
                     return this.Records.list[guiRowId].getProperty(controlId, prop);
             }
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.getPropertyStub = function (ControlsProperties, controlId, prop) {
             ControlsProperties = ControlsProperties.ControlsProperties;
             if (controlId in ControlsProperties) {
@@ -2091,31 +2062,15 @@
             }
             return '';
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.getStyleStub = function (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
-         */
         TaskMagicService.prototype.getClasses = function (controlId, guiRowId) {
             if (util.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
-         */
         TaskMagicService.prototype.getStyle = function (controlId, styleName, guiRowId) {
             if (util.isNullOrUndefined(guiRowId))
                 guiRowId = '0';
@@ -2126,36 +2081,21 @@
                 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
-         */
         TaskMagicService.prototype.getValue = function (controlId, guiRowId) {
             if (util.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
-         */
+        TaskMagicService.prototype.getFormattedValue = function (controlName, val) {
+            return this.magic.GetFormattedValue(this.taskId, controlName, val);
+        };
         TaskMagicService.prototype.setValue = function (controlId, guiRowId, value) {
             return this.Records.list[guiRowId].setValue(controlId, value);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.executeInteractiveCommand = function (guiInteractiveCommand) {
             GuiInteractiveExecutor.executeInteractiveCommand(this, guiInteractiveCommand, this.overlayWindowService);
             this.interactiveCommands.next(guiInteractiveCommand);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.handleSetProperty = function (command, isTableChild) {
             var controlId = command.CtrlName;
             var dvRowId = (command.line || 0);
@@ -2192,7 +2132,6 @@
             var controlId = command.CtrlName;
             var properties;
             var 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);
@@ -2243,13 +2182,13 @@
                     break;
                 case gui.CommandType.SET_PROPERTY:
                     this.handleSetProperty(command, isTableChild);
+                    if (command.Operation == gui.HtmlProperties.ReadOnly)
+                        this.refreshDom.next(command);
                     break;
                 case gui.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;
@@ -2275,7 +2214,7 @@
                     properties.setStyle(command.Operation, command.obj1);
                     break;
                 case gui.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 gui.CommandType.SET_VALUE:
@@ -2294,12 +2233,11 @@
                 case gui.CommandType.SET_EMPTY_DATAVIEW:
                     this.setIsEmptyDataView(command.Bool1);
                     break;
+                case gui.CommandType.SET_FOCUS:
+                    this.refreshDom.next(command);
+                    break;
             }
-            this.refreshDom.next(command);
         };
-        /**
-        custom validator
-        */
         TaskMagicService.prototype.customValidator = function (rowid, id) {
             var _this = this;
             return function (control) {
@@ -2325,13 +2263,6 @@
                 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
-         */
         TaskMagicService.prototype.ConvertValToNative = function (controlId, rowId, val) {
             var properties;
             properties = this.Records.list[0].getControlMetadata(controlId);
@@ -2380,13 +2311,6 @@
                     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
-         */
         TaskMagicService.prototype.ConvertValFromNative = function (controlId, rowId, val) {
             var properties;
             properties = this.Records.list[0].getControlMetadata(controlId);
@@ -2429,22 +2353,12 @@
                     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.
-         */
         TaskMagicService.prototype.resize = function (pageSize, topGuiRowId) {
             var guiEvent = engine.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
-         */
         TaskMagicService.prototype.onScrollDown = function () {
             if (!this.Records.includesLast) {
                 var guiEvent = engine.getGuiEventObj('getRows', 'table', 0);
@@ -2452,29 +2366,15 @@
                 this.insertEvent(guiEvent);
             }
         };
-        /**
-         * Sets the new browser window title
-         * @param newTitle New window title
-         */
         TaskMagicService.prototype.setTitle = function (newTitle) {
             this.mgTitleService.setTitle(newTitle);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.getGuiRowId = function (dvRowId, isTableControl) {
             return (isTableControl ? dvRowId + this.Records.recordsBeforeCurrentView : 0);
         };
-        /**
-         *
-         * @ignore
-         */
         TaskMagicService.prototype.getDvRowId = function (guiRowId) {
             return (guiRowId - this.Records.recordsBeforeCurrentView);
         };
-        /**
-         * Clean up the service when it is no longer needed
-         */
         TaskMagicService.prototype.dispose = function () {
             this.refreshDom.complete();
             this.detectChanges.complete();
@@ -2484,14 +2384,6 @@
             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
-         */
         TaskMagicService.prototype.onComboboxSelectionChanged = function (event, idx, line) {
             var guiEvent = engine.getGuiEventObj('selectionchanged', idx, line);
             if (typeof (event) == 'number') {
@@ -2510,11 +2402,6 @@
             }
             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
-         */
         TaskMagicService.prototype.onListBoxSelectionChanged = function (event, idx) {
             var guiEvent = engine.getGuiEventObj('selectionchanged', idx, 0);
             var selectedOptions;
@@ -2530,456 +2417,113 @@
                 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
-         */
-        TaskMagicService.prototype.onCheckChanged = function (event, idx, rowId) {
-            if (typeof rowId === 'undefined')
-                rowId = 0;
-            var guiEvent = engine.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
-         */
-        TaskMagicService.prototype.mgOnTabSelectionChanged = function (idx, layer) {
-            var guiEvent = engine.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
-         */
-        TaskMagicService.prototype.mgOnRadioSelectionChanged = function (event, idx) {
-            var result = this.getFormControl('0', idx);
-            var guiEvent = engine.getGuiEventObj('selectionchanged', idx, 0);
-            if (typeof result.value !== 'string')
-                guiEvent.Value = result.value.index;
-            else
-                guiEvent.Value = result.value;
+            guiEvent.Value = indexes;
             this.insertEvent(guiEvent);
         };
-        /**
-         * Inserts the "close" event to the magic WebClient event queue
-         */
-        TaskMagicService.prototype.close = function () {
-            this.insertEvent(engine.getGuiEventObj('close', null, 0));
-        };
-        ///////////////////////////////
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.IsStub = function () {
-            return this.magic.isStub;
-        };
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.saveData = function (data) {
-            this.magic.saveData(data);
-        };
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.createData = function () {
-            var myData = {
-                records: this.Records,
-                template: this.template
-            };
-            var text = 'loadData():any   {\n' +
-                '    let stubData = ' + JSON.stringify(myData) + ';\n' +
-                '    this.loadStubData(stubData);}';
-            console.log(text);
-            this.saveData(text);
-        };
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.loadStubData = function (stubData) {
-            this.Records = stubData.records;
-            this.settemplate(stubData.template);
-            this.taskId = '1';
-            for (var i = 0; i < this.Records.list.length; i++)
-                this.buildTableRowControls(i);
-        };
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.loadData = function () {
-            alert('Please, overwrite method loadData');
-        };
-        /**
-         * @ignore
-         */
-        TaskMagicService.prototype.setStubValue = function (guiRowId, fc, name) {
-            if (this.IsStub()) {
-                try {
-                    var val = this.Records.list[guiRowId].values[name];
-                    fc.setValue(val);
-                }
-                catch (e) {
-                }
-            }
-        };
-        return TaskMagicService;
-    }());
-    /** @nocollapse */ TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
-    /** @nocollapse */ TaskMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
-        i0.ɵsetClassMetadata(TaskMagicService, [{
-                type: i0.Injectable
-            }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null);
-    })();
-
-    /**
-     * @ignore
-     */
-    var CommandsCollectorMagicService = /** @class */ (function () {
-        function CommandsCollectorMagicService(magic) {
-            this.magic = magic;
-            this.count = 0;
-            this.commands = new mscorelib.List();
-            this.subscription = null;
-        }
-        CommandsCollectorMagicService.prototype.startCollecting = function () {
-            var _this = this;
-            this.count++;
-            utils$1.Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
-            if (this.subscription === null) {
-                this.subscription = this.magic.refreshDom
-                    .subscribe(function (command) {
-                    _this.commands.push(command);
-                });
-            }
-        };
-        CommandsCollectorMagicService.prototype.stopCollecting = function () {
-            this.count--;
-            utils$1.Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
-            if (this.count === 0) {
-                this.subscription.unsubscribe();
-                this.subscription = null;
-            }
-        };
-        CommandsCollectorMagicService.prototype.GetCommands = function (taskId) {
-            var _this = this;
-            var commands = this.commands.filter(function (command) { return command.TaskTag === taskId; });
-            commands.forEach(function (command) { _this.commands.Remove(command); });
-            return commands;
-        };
-        return CommandsCollectorMagicService;
-    }());
-    /** @nocollapse */ CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
-    /** @nocollapse */ CommandsCollectorMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
-        i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
-                type: i0.Injectable
-            }], function () { return [{ type: EngineMagicService }]; }, null);
-    })();
-
-    /**
-     * @ignore
-     */
-    var RouteCommand = /** @class */ (function () {
-        function RouteCommand() {
-        }
-        return RouteCommand;
-    }());
-    /**
-     * @ignore
-     */
-    var RouterCommandsMagicService = /** @class */ (function () {
-        function RouterCommandsMagicService() {
-            this.pendingRouteCommands = [];
-        }
-        RouterCommandsMagicService.prototype.AddRouteCommand = function (routeCommand) {
-            this.pendingRouteCommands.push(routeCommand);
-        };
-        RouterCommandsMagicService.prototype.ExecuteNextCommand = function () {
-            var pendingRouteCommand = this.pendingRouteCommands.shift();
-            if (!util.isNullOrUndefined(pendingRouteCommand)) {
-                pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
-            }
-        };
-        return RouterCommandsMagicService;
-    }());
-    /** @nocollapse */ RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-    /** @nocollapse */ RouterCommandsMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
-        i0.ɵsetClassMetadata(RouterCommandsMagicService, [{
-                type: i0.Injectable
-            }], null, null);
-    })();
-
-    /**
-     * Service for managing subforms and routing
-     */
-    var SubformMagicService = /** @class */ (function () {
-        function SubformMagicService(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
-         */
-        SubformMagicService.prototype.mgGetComp = function (subformName) {
-            if (subformName in this.subformsDict) {
-                var formName = this.subformsDict[subformName].formName;
-                if (formName)
-                    return this.componentList.getComponent(formName);
-            }
-            return null;
-        };
-        /**
-         * Returns the parameters of the subform
-         * @param subformName
-         * @returns
-         */
-        SubformMagicService.prototype.mgGetParameters = function (subformName) {
-            if (subformName in this.subformsDict) {
-                return this.subformsDict[subformName].parameters;
-            }
-            else
-                return "";
-        };
-        /**
-         * @ignore
-         */
-        SubformMagicService.prototype.deleteSubformComp = function (subformControlName, formName) {
-            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-                if (this.subformsDict[subformControlName].formName === formName) {
-                    this.subformsDict[subformControlName] = {};
-                    this.task.refreshView();
-                }
-            }
-        };
-        /**
-         * @ignore
-         */
-        SubformMagicService.prototype.addSubformComp = function (subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
-            this.pendingCommandsCollector.startCollecting();
-            var refreshNeeded = false;
-            if (util.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: formName,
-                    parameters: { taskIdParam: taskId, taskDescription: taskDescription }
-                };
-                //this.ref.detectChanges();
-                refreshNeeded = true;
-            }
-            else { // call route
-                if (inDefaultOutlet)
-                    subformControlName = "primary";
-                var routeParams = new mscorelib.List();
-                routeParams.push(routerPath);
-                if (params !== null) {
-                    routeParams = routeParams.concat(params);
-                }
-                var 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);
-            }
-            if (refreshNeeded)
-                this.task.refreshView();
-        };
-        /**
-         * Open the subform using a route command
-         */
-        SubformMagicService.prototype.ExecuteRouteCommand = function (routeCommand) {
-            var _a;
-            var reusingComponent = false;
-            var currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
-            var 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: (_a = {}, _a[routeCommand.routerOutletName] = null, _a) }], { relativeTo: relativeRoute })
-                    .then(function (result) {
-                    SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
-                    currentSubformMagicService.currentRouteDefinition = {
-                        formName: routeCommand.formName,
-                        parameters: routeCommand.parameters
-                    };
-                    currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
-                });
+        TaskMagicService.prototype.onCheckChanged = function (event, idx, rowId) {
+            if (typeof rowId === 'undefined')
+                rowId = 0;
+            var guiEvent = engine.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) {
-                    var 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);
         };
-        SubformMagicService.prototype.PerformRouterNavigate = function (routerOutletName, routeParams) {
-            var _a;
-            var relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            this.router.navigate([{ outlets: (_a = {}, _a[routerOutletName] = routeParams, _a) }], { relativeTo: relativeRoute })
-                .then(function (result) {
-                if (result !== null && !result) {
-                    var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-                    subformMagicService.currentRouteDefinition = null;
-                    SubformMagicService.currentCallerMgSubformServiceRef = null;
-                    subformMagicService.pendingCommandsCollector.stopCollecting();
-                    subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
-                }
-            });
+        TaskMagicService.prototype.mgOnTabSelectionChanged = function (idx, layer) {
+            var guiEvent = engine.getGuiEventObj('selectionchanged', idx, 0);
+            guiEvent.Value = layer.toString();
+            this.insertEvent(guiEvent);
         };
-        /**
-         * @ignore
-         */
-        SubformMagicService.prototype.init = function () {
-            var _this = this;
-            // If commands were issued for this task before ngOnInit(), they were not executed because task had not registered for them.
-            // So, execute them now.
-            var pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
-            if (pendingCommands.length > 0) {
-                pendingCommands.forEach(function (command) { _this.task.executeCommand(command); });
-                this.task.refreshView();
-            }
-            this.pendingCommandsCollector.stopCollecting();
+        TaskMagicService.prototype.mgOnRadioSelectionChanged = function (event, idx) {
+            var result = this.getFormControl('0', idx);
+            var guiEvent = engine.getGuiEventObj('selectionchanged', idx, 0);
+            if (typeof result.value !== 'string')
+                guiEvent.Value = result.value.index;
+            else
+                guiEvent.Value = result.value;
+            this.insertEvent(guiEvent);
         };
-        /**
-         * @ignore
-         */
-        SubformMagicService.prototype.refreshView = function () {
-            this.task.refreshView();
+        TaskMagicService.prototype.close = function () {
+            this.insertEvent(engine.getGuiEventObj('close', null, 0));
         };
-        ///
-        // return the relative route
-        //
-        SubformMagicService.getRelativeRoute = function (sendActivatedRoute) {
-            var 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.");
+        TaskMagicService.prototype.IsStub = function () {
+            return this.magic.isStub;
+        };
+        TaskMagicService.prototype.saveData = function (data) {
+            this.magic.saveData(data);
+        };
+        TaskMagicService.prototype.createData = function () {
+            var myData = {
+                records: this.Records,
+                template: this.template
+            };
+            var text = 'loadData():any   {\n' +
+                '    let stubData = ' + JSON.stringify(myData) + ';\n' +
+                '    this.loadStubData(stubData);}';
+            console.log(text);
+            this.saveData(text);
+        };
+        TaskMagicService.prototype.loadStubData = function (stubData) {
+            this.Records = stubData.records;
+            this.settemplate(stubData.template);
+            this.taskId = '1';
+            for (var i = 0; i < this.Records.list.length; i++)
+                this.buildTableRowControls(i);
+        };
+        TaskMagicService.prototype.loadData = function () {
+            alert('Please, overwrite method loadData');
+        };
+        TaskMagicService.prototype.setStubValue = function (guiRowId, fc, name) {
+            if (this.IsStub()) {
+                try {
+                    var val = this.Records.list[guiRowId].values[name];
+                    fc.setValue(val);
+                }
+                catch (e) {
+                }
             }
-            return currentActiveRoute;
         };
-        return SubformMagicService;
+        return TaskMagicService;
     }());
-    SubformMagicService.currentCallerMgSubformServiceRef = null;
-    SubformMagicService.routerContainers = new Array();
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ SubformMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
-        i0.ɵ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: i0.Injectable
-            }], function () { return [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }]; }, null);
+            }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null);
     })();
 
-    /**
-     * Implements various table-related functionalities
-     */
     var TableMagicService = /** @class */ (function () {
-        /**
-         *
-         * @param componentList Component-mapping service
-         * @param task Magic task service
-         */
         function TableMagicService(componentList, task) {
             this.componentList = componentList;
             this.task = task;
             this.shouldOpenFieldTextEditor = true;
         }
-        /**
-         * Refreshes the DataSource
-         */
         TableMagicService.prototype.refreshDataSource = function () {
         };
-        /**
-         * Returns the table page size
-         */
         TableMagicService.prototype.getPageSize = function () {
             return 10;
         };
-        /**
-         * Returns max no of rows in the table.
-         */
         TableMagicService.prototype.getMaxRowsInTable = function () {
             return this.task.Records.list.length;
         };
-        /**
-         * Selects the specified row
-         * @param rowId The row to select
-         */
         TableMagicService.prototype.selectRow = function (rowId) {
             this.selectedItem = rowId;
         };
         TableMagicService.prototype.getSelectedRow = function () {
             return this.selectedItem;
         };
-        /**
-         * Returns the selected row
-         */
         TableMagicService.prototype.selectedRow = function () {
             return null;
         };
-        /**
-         * Selects the specified page
-         * @param  pageId The page to select
-         */
         TableMagicService.prototype.selectPage = function (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
-         */
         TableMagicService.prototype.OpenDialogForControl = function (element) {
             if (element.tagName === "MAT-SELECT" || element.tagName === "MAT-CHECKBOX" ||
                 element.tagName === "INPUT" ||
@@ -2987,34 +2531,17 @@
                 return false;
             return true;
         };
-        /**
-         * Returns the dialog used to edit values
-         */
         TableMagicService.prototype.getDialog = function () {
             return null;
         };
-        /**
-         * Handles the table "scrolled" event
-         */
         TableMagicService.prototype.onScrollDown = function () {
             this.task.onScrollDown();
         };
-        /**
-         * To be overwitten in specific implelemtations
-         */
         TableMagicService.prototype.sortData = function (e) { };
-        /**
-         * To be overwitten in specific implelemtations
-         */
         TableMagicService.prototype.mgOnPaginateChange = function (e) { };
         TableMagicService.prototype.mgOptionChanged = function (e) { };
-        /**
-         * Change the number of lines in a table
-         * @param  size New number of lines in table
-         */
         TableMagicService.prototype.updateTableSize = function (size) {
-            if (size === 0) // never remove row 0 for now
-             {
+            if (size === 0) {
                 size = 1;
                 this.task.Records.clearFirstTableRecord(this.task.template);
             }
@@ -3022,17 +2549,11 @@
             this.task.Records.updateSize(size);
             this.task.setIncludesFirst(false);
         };
-        /**
-         * @ignore
-         */
         TableMagicService.prototype.setTableTopIndex = function (value) {
             if (!this.task.Records.includesFirst)
                 value++;
             this.task.Records.setGuiTopIndex(value);
         };
-        /**
-         * @ignore
-         */
         TableMagicService.prototype.getTableTopIndex = function () {
             var topIndex = this.task.Records.getGuiTopIndex();
             if (!this.task.Records.includesFirst)
@@ -3041,60 +2562,37 @@
         };
         return TableMagicService;
     }());
-    /** @nocollapse */ TableMagicService.ɵfac = function TableMagicService_Factory(t) { return new (t || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
-    /** @nocollapse */ TableMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: ComponentListMagicService }, { type: TaskMagicService }]; }, null);
     })();
 
-    /**
-     * Enables changing the browser title using Magic expression (SetTitle)
-     */
     var TitleMagicService = /** @class */ (function () {
-        /**
-         *
-         * @param titleService Angular's title-changing class
-         */
         function TitleMagicService(titleService) {
             this.titleService = titleService;
         }
-        /**
-         * Set the new title of the window
-          * @param newTitle New title of the window
-         */
         TitleMagicService.prototype.setTitle = function (newTitle) {
             this.titleService.setTitle(newTitle);
         };
         return TitleMagicService;
     }());
-    /** @nocollapse */ TitleMagicService.ɵfac = function TitleMagicService_Factory(t) { return new (t || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
-    /** @nocollapse */ TitleMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: i1$1.Title }]; }, null);
     })();
 
-    /**
-     * Provides the UI with values calculated by the Magic WebClient
-     */
     var AccessorMagicService = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function AccessorMagicService(task) {
             this.task = task;
             this.Logger = null;
             this.Logger = utils$1.Logger.Instance;
         }
-        /**
-         * Checks if the control is read-only
-         * @param controlId Id of control
-         * @returns Is the control not read-only
-         */
-        // CheckReadOnly
         AccessorMagicService.prototype.checkIsReadOnly = function (controlId) {
             var properties;
             properties = this.task.Records.list[0].getControlMetadata(controlId);
@@ -3103,99 +2601,45 @@
             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
         AccessorMagicService.prototype.getText = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getTabpageText = function (controlId, layer) {
             var items = this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getImage = function (controlId, rowId) {
             var result = this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.isImageExists = function (controlId, rowId) {
             var result = this.task.getProperty(controlId, gui.HtmlProperties.Image, rowId);
             return !util.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
         AccessorMagicService.prototype.getClasses = function (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
         AccessorMagicService.prototype.getStyle = function (controlId, styleName, rowId) {
             var 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
         AccessorMagicService.prototype.getVisible = function (controlId, rowId) {
             var vis = this.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getNumericPicture = function (picture) {
             if (util.isNullOrUndefined(picture))
                 return null;
             var pic = new gui.PIC(picture, utils$1.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) {
+                var pref = '-' + pic.getPosPref_();
+                if (pref == pic.getNegPref_())
+                    obj['prefix'] = pic.getPosPref_();
+            }
             if (pic.getPosSuff_().length > 0)
                 obj['suffix'] = pic.getPosSuff_();
             else
@@ -3217,128 +2661,51 @@
                 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
         AccessorMagicService.prototype.getMustInput = function (controlId, rowId) {
             var vis = this.getProperty(controlId, gui.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
         AccessorMagicService.prototype.isDisabled = function (controlId, rowId) {
             var result = this.getProperty(controlId, gui.HtmlProperties.Enabled, rowId);
             return result === true ? null : true;
         };
-        /**
-         * @ignore
-         */
-        // getProperty (not changed)
         AccessorMagicService.prototype.getProperty = function (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
         AccessorMagicService.prototype.getTitle = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.HtmlProperties.Tooltip, rowId);
         };
-        /**
-         * Returns the title (tooltip) text of the control
-         * @param controlId Id of control
-         * @param rowId Id of row, if applicable
-         * @returns
-         */
-        // mgGetTitle for zoom button
         AccessorMagicService.prototype.getZoomButtonTitle = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.HtmlProperties.ZoomButtonTooltip, rowId);
         };
-        /**
-         * Gets the selection control's selected value
-         * @param controlId Id of control
-         * @param rowId Id of row, if applicable
-         * @returns
-         */
-        // getSelectedValue
         AccessorMagicService.prototype.getSelectedValue = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getPlaceholder = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getType = function (controlId, rowId) {
             var result = this.task.getProperty(controlId, gui.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
         AccessorMagicService.prototype.getTabIndex = function (controlId, rowId) {
             return this.task.getProperty(controlId, gui.HtmlProperties.TabIndex, rowId);
         };
-        /**
-         * Returns the value of the control
-         * @param controlId Id of control
-         * @param rowId Id of row, if applicable
-         * @returns
-         */
-        /// mgGetValue -->
         AccessorMagicService.prototype.getValue = function (controlId, rowId) {
             var 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 -->
+        AccessorMagicService.prototype.getFormattedValue = function (controlId, rowId) {
+            var val = this.task.getValue(controlId, rowId);
+            val = this.task.getFormattedValue(controlId, val);
+            return val;
+        };
         AccessorMagicService.prototype.getPicture = function (controlId, rowId) {
             if (util.isNullOrUndefined(controlId))
                 return null;
             var 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
         AccessorMagicService.prototype.getCustomProperty = function (controlId, propertyNameOrRowID, rowId) {
             if (controlId.indexOf('~') == -1)
                 return this.getCustomProperty_1(controlId, propertyNameOrRowID, rowId);
@@ -3363,22 +2730,21 @@
             }
             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
         AccessorMagicService.prototype.getItemListValues = function (id, rowId) {
             return this.getProperty(id, gui.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
-       */
+        AccessorMagicService.prototype.getFilteredList = function (controlId, rowId) {
+            if (util.isNullOrUndefined(rowId))
+                rowId = '0';
+            var items = this.getItemListValues(controlId, rowId);
+            var value = this.task.getFormControl(rowId, controlId).value;
+            if (value !== null && value !== "" && items instanceof Array) {
+                value = value.toLowerCase();
+                return items.filter(function (option) { return option.displayValue.toLowerCase().includes(value); });
+            }
+            else
+                return items;
+        };
         AccessorMagicService.prototype.getDisplayValue = function (id, rowId) {
             var displayValue = "";
             var o = this.getProperty(id, gui.HtmlProperties.ItemsList, rowId);
@@ -3387,12 +2753,6 @@
                 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
         AccessorMagicService.prototype.isOptionSelected = function (index, controlId) {
             var e_1, _a;
             var val = this.task.getValue(controlId, "0");
@@ -3412,40 +2772,18 @@
             }
             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
         AccessorMagicService.prototype.isTabPageSelected = function (controlId, layer) {
             var val = this.task.getProperty(controlId, gui.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);
+        };
         AccessorMagicService.prototype.isTabPageLayerSelected = function (controlId, layer) {
             var val = this.task.getProperty(controlId, gui.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
-         */
         AccessorMagicService.prototype.getTabSelectedIndex = function (controlId) {
             var val = this.task.getProperty(controlId, gui.HtmlProperties.SelectedValue);
-            return val; // comparing string to number!
+            return val;
         };
-        // private methodes
-        /**
-         * @ignore
-         */
-        // mgIfRowCreated
         AccessorMagicService.prototype.ifRowCreated = function (row) {
             if (row == null)
                 return false;
@@ -3453,48 +2791,25 @@
             var result = this.getFormGroupByRow(rowId);
             return !util.isNullOrUndefined(result);
         };
-        /**
-         * @ignore
-         */
-        // mgGetFormGroupByRow
         AccessorMagicService.prototype.getFormGroupByRow = function (id) {
             return this.task.formGroups[id];
         };
-        /**
-         * @ignore
-         */
-        // isRowSelected (not changed)
         AccessorMagicService.prototype.isRowSelected = function (controlId, rowId) {
             var selectedRow = this.task.getProperty(controlId, gui.HtmlProperties.SelectedRow, "0");
             return selectedRow == rowId;
         };
-        /**
-         * Returns whether a row is in edit state
-         * @param row
-         */
         AccessorMagicService.prototype.isRowInRowEditing = function (row) {
             var 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
-         */
         AccessorMagicService.prototype.isCurrentInRowEditing = function () {
             var row = this.task.tableService.getSelectedRow();
             return this.task.isRowInRowEditing(row);
         };
-        /**
-         * @ignore
-         */
-        // GetGuiTopIndex
         AccessorMagicService.prototype.guiTopIndex = function () {
             return this.task.tableService.getTableTopIndex();
         };
-        /**
-         * @ignore
-         */
         AccessorMagicService.prototype.getErrMsg = function (id, rowId) {
             var e_2, _a;
             var c = this.task.getFormControl(rowId, id);
@@ -3527,12 +2842,6 @@
             }
             return 'unknown error';
         };
-        /**
-         * Sets a user-supplied value to the specified control
-         * @param controlName
-         * @param value
-         * @param refreshDisplay
-         */
         AccessorMagicService.prototype.setValueToControl = function (controlName, value, refreshDisplay) {
             if (typeof refreshDisplay === "undefined")
                 refreshDisplay = true;
@@ -3541,31 +2850,17 @@
             guiEvent.param = refreshDisplay;
             this.task.insertEvent(guiEvent);
         };
-        /**
-       * @ignore
-       */
         AccessorMagicService.prototype.isDataviewEmpty = function () {
             return this.task.Records.isEmptyDataView;
         };
-        /**
-         * simulates a click event on the specified control, for the Magic engine
-         * @param controlName
-         * @param rowId
-         */
         AccessorMagicService.prototype.simulateClick = function (controlName, rowId) {
             if (typeof rowId === "undefined")
                 rowId = 0;
             this.task.insertEvent(engine.getGuiEventObj('click', controlName, rowId));
         };
-        /**
-         * Return Boolean TRUE if user logged in Else it will return FALSE
-         */
         AccessorMagicService.prototype.isLoggedIn = function () {
             return this.task.getIsLoggenIn();
         };
-        /**
-         * Returns JS object containing the records with all table fields.
-         */
         AccessorMagicService.prototype.GetFormRecords = function () {
             var _this = this;
             var rowId = 0;
@@ -3573,13 +2868,11 @@
             if (!util.isNullOrUndefined(this.task.Records) && this.task.Records.list.length > 0) {
                 var recList = this.task.Records.list;
                 var tableControls_1 = new Array();
-                //Generate list of table fields names
                 for (var key in this.task.template) {
                     if (this.task.template[key] == '1')
                         tableControls_1.push(key);
                 }
                 recArray = new Array();
-                //Update the records as list of objects with values for table fields.
                 if (tableControls_1.length > 0) {
                     recList.forEach(function (ctrlMetaData) {
                         if (_this.task.Records.isRowCreated(rowId)) {
@@ -3595,23 +2888,26 @@
             }
             return recArray;
         };
+        AccessorMagicService.prototype.SetCookie = function (name, value, expires, path, domain, secure, sameSite) {
+            engine.CookieService.setCookie(name, value, expires, path, domain, secure, sameSite);
+        };
+        AccessorMagicService.prototype.GetCookie = function (name) {
+            return engine.CookieService.getCookie(name);
+        };
+        AccessorMagicService.prototype.DeleteCookie = function (name) {
+            return engine.CookieService.deleteCookie(name);
+        };
         return AccessorMagicService;
     }());
-    /** @nocollapse */ AccessorMagicService.ɵfac = function AccessorMagicService_Factory(t) { return new (t || AccessorMagicService)(i0.ɵɵinject(TaskMagicService)); };
-    /** @nocollapse */ AccessorMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: TaskMagicService }]; }, null);
     })();
 
-    /**
-     * Central place for adding the Magic services
-     */
     var MagicServices = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function MagicServices(task, subformService, tableService, titleService, mgAccessorService) {
             this.task = task;
             this.subformService = subformService;
@@ -3625,36 +2921,21 @@
         }
         return MagicServices;
     }());
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ MagicServices.ɵprov = i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: TaskMagicService }, { type: SubformMagicService }, { type: TableMagicService }, { type: TitleMagicService }, { type: AccessorMagicService }]; }, null);
     })();
 
-    /**
-     * Base component representing a Magic task
-     */
     var TaskBaseMagicComponent = /** @class */ (function () {
-        /**
-         *
-         * @param ref changes-detector object
-         * @param magicServices Access point for all Magic services
-         */
         function TaskBaseMagicComponent(ref, magicServices) {
             this.ref = ref;
             this.magicServices = magicServices;
-            /**
-             * @ignore
-             */
             this.magicProperties = utils$1.MagicProperties;
         }
         Object.defineProperty(TaskBaseMagicComponent.prototype, "task", {
-            /**
-             * Returns the Magic task service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.task;
             },
@@ -3662,10 +2943,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "mgSub", {
-            /**
-             * Returns the Magic subform service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.subformService;
             },
@@ -3673,10 +2950,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "tableService", {
-            /**
-             * Returns the Magic table service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.tableService;
             },
@@ -3684,10 +2957,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "mg", {
-            /**
-             * Returns the Magic accessor service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.mgAccessorService;
             },
@@ -3695,10 +2964,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "taskId", {
-            /**
-             * Returns the task Id
-             * @returns
-             */
             get: function () {
                 return this.task.taskId;
             },
@@ -3706,19 +2971,12 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "screenFormGroup", {
-            /**
-             * Returns the FormGroup for screen-mode forms
-             * @returns
-             */
             get: function () {
                 return this.task.ScreenModeControls;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Interface implementation
-         */
         TaskBaseMagicComponent.prototype.ngOnInit = function () {
             var _this = this;
             var subscription = this.task.detectChanges.pipe().subscribe(function (c) {
@@ -3727,48 +2985,19 @@
             this.task.initTask(this.taskIdParam, this.taskDescription);
             this.createFormControlsAccessor(this.screenFormGroup);
             this.setInputDateFormat();
-            // subcribe to custom property changes
             this.task.customPropertiesSubject.pipe().subscribe(function (property) {
                 _this.PropertyChanged(property.propertyName, property.rowId, property.value);
             });
-            // subcribe to records count changes
             this.task.recordsCountChangeSubject.pipe().subscribe(function (value) {
                 _this.RecordsCountChanged(value);
             });
         };
-        /**
-         * @ignore
-         */
         TaskBaseMagicComponent.prototype.createFormControlsAccessor = function (formGroup) { };
-        /**
-         * @ignore
-         */
         TaskBaseMagicComponent.prototype.setInputDateFormat = function () { };
-        /**
-         * 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}
-         */
         TaskBaseMagicComponent.prototype.PropertyChanged = function (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.
-         */
+        };
         TaskBaseMagicComponent.prototype.RecordsCountChanged = function (recordsCount) {
-            // intentionally left blank because the implementation should be in the derived class
         };
-        /**
-         * Interface implementation
-         */
         TaskBaseMagicComponent.prototype.ngAfterViewInit = function () {
             this.mgSub.init();
         };
@@ -3778,17 +3007,14 @@
                 this.task.oldPageSize = this.tableService.getPageSize();
             }
         };
-        /**
-         * Interface implementation
-         */
         TaskBaseMagicComponent.prototype.ngOnDestroy = function () {
             this.task.dispose();
         };
         return TaskBaseMagicComponent;
     }());
-    /** @nocollapse */ TaskBaseMagicComponent.ɵfac = function TaskBaseMagicComponent_Factory(t) { return new (t || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
-    /** @nocollapse */ 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 });
-    /*@__PURE__*/ (function () {
+    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: i0.Component,
                 args: [{
@@ -3803,22 +3029,13 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var RowMagicDirective = /** @class */ (function () {
         function RowMagicDirective(_task, element) {
             this._task = _task;
             this.element = element;
-            /**
-             * @ignore
-             */
             this.rowChangedSubscriber = null;
             this.htmlElement = this.element.nativeElement;
         }
-        /**
-         * Initializes this object
-         */
         RowMagicDirective.prototype.ngOnInit = function () {
             var _this = this;
             this.rowChangedSubscriber = this._task
@@ -3834,16 +3051,7 @@
             return (rect.top >= parentRect.top &&
                 rect.bottom <= parentRect.bottom);
         };
-        /**
-         * Cleanup
-         */
         RowMagicDirective.prototype.ngOnDestroy = function () {
-            // 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();
             }
@@ -3856,13 +3064,13 @@
         };
         return RowMagicDirective;
     }());
-    /** @nocollapse */ RowMagicDirective.ɵfac = function RowMagicDirective_Factory(t) { return new (t || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    /** @nocollapse */ RowMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: RowMagicDirective, selectors: [["", "magicRow", ""]], hostBindings: function RowMagicDirective_HostBindings(rf, ctx) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(RowMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -3877,35 +3085,16 @@
                 }] });
     })();
 
-    /**
-     * Connects HTML elements to the Magic Web Client engine
-     */
     var MagicDirective = /** @class */ (function () {
-        /**
-         *
-         * @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
-         */
         function MagicDirective(_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;
         }
@@ -3919,9 +3108,6 @@
         });
         ;
         Object.defineProperty(MagicDirective.prototype, "eventsOnly", {
-            /**
-             * This flag is used when we only want to register to events, but do not want to execute commands sent from server
-             */
             set: function (val) {
                 console.log('eventsOnly');
                 this.eventsOnlyVal = true;
@@ -3931,36 +3117,25 @@
         });
         ;
         Object.defineProperty(MagicDirective.prototype, "task", {
-            /**
-             * Get the task service
-             * @returns
-             */
             get: function () {
                 return this._task;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Register to the events this element may need to handle
-         */
         MagicDirective.prototype.regEvents = function () {
             var _this = this;
-            // Handle events for which event handler may be removed and restored
             this.eventHandlers['focusin'] = this.OnFocus.bind(this);
             Object.keys(this.eventHandlers).forEach(function (key) {
                 _this.focusUnlistener = _this.renderer.listen(_this.htmlElement, key, _this.eventHandlers[key]);
             });
-            // Handle events with anonymous  event handlers
-            var events = ['click', 'mousedown', 'dblclick']; // ,'resize', 'load', 'unload'
+            var events = ['click', 'mousedown', 'dblclick'];
             events.forEach(function (event) {
                 _this.renderer.listen(_this.htmlElement, event, function (e) {
-                    // check if the event is fired from zoom button ( to identify the connected zoom button in engine)
                     var fromButton = false;
                     if (_this.htmlElement instanceof HTMLButtonElement)
                         fromButton = true;
                     _this.task.insertEvent(engine.getGuiEventObj(event, _this.id, +_this.rowId, fromButton));
-                    e.cancelBubble = true;
                 });
             });
             this.renderer.listen(this.htmlElement, 'change', function (e) {
@@ -3971,13 +3146,10 @@
                     _this.task.insertEvent(guiEvent);
                 }
             });
-            // handle the input event
             fromEvent.fromEvent(this.htmlElement, 'input').pipe(operators.map(function (event) {
                 return event.target.value;
-            }), operators.debounceTime(200) // time after which value will be sent to magic
-            ).subscribe(function (x) {
+            }), operators.debounceTime(200)).subscribe(function (x) {
                 if (_this.task.getProperty(_this.id, gui.HtmlProperties.BindingLevel, _this.rowId) === utils$1.BindingLevel.Character) {
-                    // Don't support character binding for date/time values
                     var attribute = _this.task.Records.list[0].getControlMetadata(_this.id).dataType;
                     if (attribute !== utils$1.StorageAttributeType.Date && attribute != utils$1.StorageAttributeType.Time)
                         _this.task.mgAccessorService.setValueToControl(_this.id, x, true);
@@ -4003,25 +3175,16 @@
                     (e.keyCode >= gui.GuiConstants.KEY_F1 && e.keyCode <= gui.GuiConstants.KEY_F12);
                 if (guiEvent.modifiers !== gui.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 !== gui.GuiConstants.KEY_ESC || e.keyCode === gui.GuiConstants.KEY_ESC && !MagicDirective.opened)
                         e.cancelBubble = true;
                     _this.task.insertEvent(guiEvent);
                 }
             });
         };
-        /**
-         * Handle focus event
-         */
         MagicDirective.prototype.OnFocus = function () {
             this.task.insertEvent(engine.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
-         */
         MagicDirective.prototype.IsSameElement = function (command) {
             var line = command.line;
             if (this.task.isTableControl(command.CtrlName))
@@ -4030,17 +3193,9 @@
                 (line === +this.rowId ||
                     (line === 0 && util.isNullOrUndefined(this.rowId))));
         };
-        /**
-         * Is the command's element the same as this directive's component
-         * @param command
-         * @returns true/false
-         */
         MagicDirective.prototype.IsSameComponent = function (command) {
             return (command.controlName === this.id);
         };
-        /**
-         * @ignore
-         */
         MagicDirective.prototype.regUpdatesUI = function () {
             var _this = this;
             this.subscribeRefreshDom = this.task
@@ -4063,17 +3218,10 @@
                 _this.handleInteractiveCommands(command);
             });
         };
-        /**
-         * Initializes this object
-         */
         MagicDirective.prototype.ngOnInit = function () {
             this.regEvents();
             this.regUpdatesUI();
         };
-        /**
-         * Handles the commands received from the Magic WebClient engine
-         * @param command
-         */
         MagicDirective.prototype.handleCommand = function (command) {
             switch (command.CommandType) {
                 case gui.CommandType.SET_PROPERTY:
@@ -4081,16 +3229,12 @@
                     break;
                 case gui.CommandType.SET_FOCUS:
                     this.focusUnlistener();
-                    // Do not set focus on connected zoom  button
                     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
-         */
         MagicDirective.prototype.handleInteractiveCommands = function (command) {
             switch (command._commandType) {
                 case gui.InteractiveCommandType.CALL_JS:
@@ -4100,24 +3244,18 @@
                     var resultString = '';
                     try {
                         if (!util.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
-         */
         MagicDirective.prototype.handleSetProperty = function (command) {
             switch (command.Operation) {
                 case gui.HtmlProperties.ReadOnly:
@@ -4128,18 +3266,15 @@
                     break;
             }
         };
-        /**
-         * Cleanup
-         */
         MagicDirective.prototype.ngOnDestroy = function () {
             this.subscribeRefreshDom.unsubscribe();
         };
         return MagicDirective;
     }());
     MagicDirective.opened = false;
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", rowId: "rowId" } });
-    /*@__PURE__*/ (function () {
+    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: i0.Directive,
                 args: [{
@@ -4160,9 +3295,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var NoControlMagicDirective = /** @class */ (function (_super) {
         __extends(NoControlMagicDirective, _super);
         function NoControlMagicDirective(_task, element, renderer, vcRef, magicRow) {
@@ -4203,12 +3335,10 @@
                 }
             }
         };
-        // is the div a tab control
         NoControlMagicDirective.prototype.isTabControl = function () {
             return this.htmlElement instanceof HTMLDivElement &&
                 this.htmlElement.children[0].getAttribute('magicMark') === "magicTabControl";
         };
-        // is the div a radio buttons wrapper
         NoControlMagicDirective.prototype.isRadio = function () {
             return this.htmlElement instanceof HTMLDivElement &&
                 this.htmlElement.children[0].getAttribute('magicMark') === "magicRadio";
@@ -4217,7 +3347,6 @@
             _super.prototype.handleCommand.call(this, command);
             switch (command.CommandType) {
                 case gui.CommandType.SET_CLASS:
-                    //remove the class which was replaced by this new one, as registered in the ControlMetadata
                     var controlMetadata = this._task.Records.list[0].getControlMetadata(this.id);
                     if (controlMetadata.removedClass != '') {
                         this.htmlElement.classList.remove(controlMetadata.removedClass);
@@ -4230,7 +3359,7 @@
                         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") {
@@ -4254,7 +3383,6 @@
                     break;
             }
         };
-        // handle set-property commands
         NoControlMagicDirective.prototype.handleSetProperty = function (command) {
             var e_1, _a;
             _super.prototype.handleSetProperty.call(this, command);
@@ -4271,7 +3399,6 @@
                     break;
                 case gui.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);
@@ -4323,8 +3450,7 @@
                             var child = tabControl.children[i];
                             var 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 {
@@ -4332,7 +3458,6 @@
                                 }
                             }
                             else {
-                                // not a buton - hide unselected tabpages
                                 var style = (layer == command.obj1) ? 'display: inline' : 'display: none';
                                 child.setAttribute('style', style);
                             }
@@ -4355,9 +3480,9 @@
         };
         return NoControlMagicDirective;
     }(MagicDirective));
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ NoControlMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: ["magicnc", "magic"] }, features: [i0.ɵɵInheritDefinitionFeature] });
-    /*@__PURE__*/ (function () {
+    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: i0.Directive,
                 args: [{
@@ -4373,133 +3498,12 @@
                 }] });
     })();
 
-    /**
-     * Mock component, implements routing by connecting the requested URL with the appropriate Magic task
-     */
-    var RouterContainerMagicComponent = /** @class */ (function () {
-        /**
-         *
-         * @param changeDetectorRef
-         * @param activatedRoute
-         * @param magic
-         * @param componentFactoryResolver
-         * @param viewContainerRef
-         * @param componentList
-         * @param pendingCommandsCollector
-         */
-        function RouterContainerMagicComponent(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
-         */
-        RouterContainerMagicComponent.prototype.ngOnInit = function () {
-            var outletname = this.activatedRoute.outlet;
-            var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-            var currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            if (subformMagicService == null || subformMagicService.currentRouteDefinition === null) {
-                this.insertRouteEvent(currentActiveRoute);
-                SubformMagicService.routerContainers.push(this);
-            }
-            else {
-                this.initializeComponent();
-            }
-        };
-        RouterContainerMagicComponent.prototype.insertRouteEvent = function (currentActiveRoute) {
-            var guiEvent = engine.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
-            var calcRouterPath = currentActiveRoute.routeConfig.path;
-            // add the RouterPath only if exist
-            if (calcRouterPath.length > 0) {
-                var routerPath = calcRouterPath;
-                var tokens = utils$1.StrUtil.tokenize(routerPath, "/:");
-                guiEvent.RouterPath = tokens[0];
-                guiEvent.RouterParams = new mscorelib.List();
-                for (var i = 1; i < tokens.length; i++) {
-                    guiEvent.RouterParams.push(this.activatedRoute.snapshot.params[tokens[i]]);
-                }
-            }
-            this.containerTaskService.insertEvent(guiEvent);
-        };
-        RouterContainerMagicComponent.prototype.initializeComponent = function () {
-            var _this = this;
-            // re-init subformMagicService  since it may change after executing "RouterNavigate" event.
-            var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-            if (subformMagicService.currentRouteDefinition !== null) {
-                var comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
-                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
-                this.componentRef = this.viewContainerRef.createComponent(componentFactory);
-                Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
-                var myActiveRoute_1 = SubformMagicService.getRelativeRoute(this.activatedRoute);
-                var routeParams = utils$1.StrUtil.tokenize(myActiveRoute_1.snapshot.routeConfig.path, "/:");
-                subformMagicService.routesDict[myActiveRoute_1.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.
-                var ignoreParamChange_1 = true;
-                myActiveRoute_1.paramMap.subscribe(function (params) {
-                    if (!ignoreParamChange_1)
-                        _this.insertRouteEvent(myActiveRoute_1);
-                    ignoreParamChange_1 = false;
-                });
-                this.parentMgSubformService.refreshView();
-                this.routerCommandsMagicService.ExecuteNextCommand();
-            }
-        };
-        /**
-         * Cleanup
-         */
-        RouterContainerMagicComponent.prototype.ngOnDestroy = function () {
-            // 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();
-                var currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-                this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
-            }
-        };
-        return RouterContainerMagicComponent;
-    }());
-    /** @nocollapse */ RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
-    /** @nocollapse */ RouterContainerMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
-    /*@__PURE__*/ (function () {
-        i0.ɵsetClassMetadata(RouterContainerMagicComponent, [{
-                type: i0.Component,
-                args: [{
-                        selector: 'magic-route-outlet',
-                        template: "\n  "
-                    }]
-            }], function () { return [{ type: i2.ActivatedRoute }, { type: EngineMagicService }, { type: TaskMagicService }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null);
-    })();
-
-    /**
-     * @ignore
-     */
     var Constants = /** @class */ (function () {
         function Constants() {
         }
         return Constants;
     }());
     Constants.DATE_FMT = 'dd/MMM/yyyy';
-    /**
-     * @ignore
-     */
     var DateMagicPipe = /** @class */ (function (_super) {
         __extends(DateMagicPipe, _super);
         function DateMagicPipe(_task) {
@@ -4513,7 +3517,6 @@
             var mgDateFormatter = new MgDateFormatter();
             if (!util.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;
@@ -4528,9 +3531,9 @@
         };
         return DateMagicPipe;
     }(i1.DatePipe));
-    /** @nocollapse */ DateMagicPipe.ɵfac = function DateMagicPipe_Factory(t) { return new (t || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService)); };
-    /** @nocollapse */ DateMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
-    /*@__PURE__*/ (function () {
+    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: i0.Pipe,
                 args: [{
@@ -4599,18 +3602,12 @@
                 return formatStr.ToString();
             }
             else
-                return "dd-mm-yyyy"; // return default format.
+                return "dd-mm-yyyy";
         };
         return MgDateFormatter;
     }());
 
-    /**
-     * Perform Magic validation on input controls which hold alphanumeric strings
-     */
     var MgformatMagicDirective = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function MgformatMagicDirective(magicDir, _task) {
             this.magicDir = magicDir;
             this._task = _task;
@@ -4618,20 +3615,12 @@
         MgformatMagicDirective.prototype.ngAfterViewInit = function () {
             var control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
             if (control != null && this._task.mgInputDateFormat == null) {
-                // get the first date control's format.
                 var pic = this._task.GetControlPictureMask(this.magicDir.id);
                 if (pic.getAttr() == utils$1.StorageAttribute.DATE) {
                     this.formatDate(pic);
                 }
             }
         };
-        /**
-         * @ignore
-         */
-        /**
-         * This can be used to set pattern
-         * On input, verifies the input matches the required mask
-         */
         MgformatMagicDirective.prototype.onFocusEvent = function ($event) {
             var control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
             if (control != null) {
@@ -4656,10 +3645,6 @@
                 }
             }
         };
-        /**
-         * @ignore
-        */
-        // This can be used to implement uppercase/lower case
         MgformatMagicDirective.prototype.onChangeEvent = function ($event) {
             var control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
             var attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
@@ -4677,9 +3662,6 @@
             var mgDateFormatter = new MgDateFormatter();
             this._task.mgInputDateFormat = mgDateFormatter.ConvertMgDateFormatToAngular(pic.getMask());
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.formatAlphaUnicode = function (control) {
             var value = control.value;
             if (value !== null && value.length > 0) {
@@ -4705,9 +3687,6 @@
                 control.setValue(valueStr.ToString());
             }
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.formatBoolean = function (control) {
             var value = control.value;
             if (value !== null && value.length > 0) {
@@ -4720,12 +3699,6 @@
                 }
             }
         };
-        /**
-         * @ignore
-         */
-        /// <summary>
-        /// generate pattern from  fld's  format
-        /// </summary>
         MgformatMagicDirective.prototype.generatePattern = function (attribute, pic) {
             var pattern = "";
             switch (attribute) {
@@ -4739,12 +3712,6 @@
             }
             return pattern;
         };
-        /**
-         * @ignore
-         */
-        /// <summary>
-        /// generate pattern for Alpha
-        /// </summary>
         MgformatMagicDirective.prototype.generatePatternForNumber = function (pic) {
             var patternStr = new mscorelib.StringBuilder();
             patternStr.Append("^");
@@ -4757,9 +3724,6 @@
             patternStr.Append("$");
             return patternStr.ToString();
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.isPatternGenerationNeeded = function (attr, pic) {
             switch (attr) {
                 case utils$1.StorageAttribute.NUMERIC:
@@ -4769,12 +3733,6 @@
                     return (pic.getMaskChars() > 0) ? true : false;
             }
         };
-        /**
-         * @ignore
-         */
-        /// <summary>
-        /// generate pattern for Alpha
-        /// </summary>
         MgformatMagicDirective.prototype.generatePatternForAlpha = function (pic) {
             var cnt = 0;
             var inputAllChars = false;
@@ -4785,7 +3743,6 @@
             var pattern = new mscorelib.StringBuilder();
             pattern.Append("^");
             for (var i = 0; i < mask.length;) {
-                //start new subset , if mask[i] is one of these.
                 if (inputAllChars && (mask.charCodeAt(i) == utils$1.PICInterface.PIC_N || mask.charCodeAt(i) == utils$1.PICInterface.PIC_U || mask.charCodeAt(i) == utils$1.PICInterface.PIC_L
                     || mask.charCodeAt(i) == utils$1.PICInterface.PIC_X)) {
                     pattern.Append("(");
@@ -4831,13 +3788,9 @@
             pattern.Append("$");
             return pattern.ToString();
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.getDirectiveCount = function (mask, idx, pattern, changeInPattern) {
             changeInPattern.value = false;
             var patternCount = 0;
-            // find max chars
             while (idx < mask.length && this.IsPatternMatches(mask.charCodeAt(idx).toString(), pattern)) {
                 patternCount++;
                 idx++;
@@ -4846,9 +3799,6 @@
                 changeInPattern.value = true;
             return patternCount;
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.IsPatternMatches = function (mask, pattern) {
             for (var i = 0; i < pattern.length; i++)
                 if (mask == pattern[i])
@@ -4857,13 +3807,13 @@
         };
         return MgformatMagicDirective;
     }());
-    /** @nocollapse */ MgformatMagicDirective.ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
-    /** @nocollapse */ MgformatMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirective, selectors: [["", "mgFormat", ""]], hostBindings: function MgformatMagicDirective_HostBindings(rf, ctx) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(MgformatMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -4878,9 +3828,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var TimeMagicPipe = /** @class */ (function (_super) {
         __extends(TimeMagicPipe, _super);
         function TimeMagicPipe(_task) {
@@ -4919,9 +3866,9 @@
         };
         return TimeMagicPipe;
     }(i1.DatePipe));
-    /** @nocollapse */ TimeMagicPipe.ɵfac = function TimeMagicPipe_Factory(t) { return new (t || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService)); };
-    /** @nocollapse */ TimeMagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
-    /*@__PURE__*/ (function () {
+    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: i0.Pipe,
                 args: [{
@@ -4930,24 +3877,11 @@
             }], function () { return [{ type: TaskMagicService }]; }, null);
     })();
 
-    /**
-     * Validates the field range.
-     */
     var RangeValidatorMagicDirective = /** @class */ (function () {
-        /**
-         *
-         * @param _task The task service
-         * @param vcRef
-         */
         function RangeValidatorMagicDirective(_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
-         */
         RangeValidatorMagicDirective.prototype.validate = function (c) {
             var controlName;
             controlName = this.getControlName(c);
@@ -4969,24 +3903,21 @@
                 };
             }
         };
-        /**
-         * @ignore
-         */
         RangeValidatorMagicDirective.prototype.getControlName = function (c) {
             var formGroup = c.parent.controls;
             return Object.keys(formGroup).find(function (name) { return c === formGroup[name]; }) || null;
         };
         return RangeValidatorMagicDirective;
     }());
-    /** @nocollapse */ RangeValidatorMagicDirective.ɵfac = function RangeValidatorMagicDirective_Factory(t) { return new (t || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-    /** @nocollapse */ RangeValidatorMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], features: [i0.ɵɵ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: forms.NG_VALIDATORS,
                     useExisting: RangeValidatorMagicDirective,
                     multi: true,
                 }
             ])] });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(RangeValidatorMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -5011,36 +3942,20 @@
             i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
         }
     }
-    /**
-     * Represents a Magic subform
-     */
     var SubformMagicComponent = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function SubformMagicComponent(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(function (v) { return !util.isNullOrUndefined(v); });
         }
         Object.defineProperty(SubformMagicComponent.prototype, "magic", {
-            /**
-             * @ignore
-             */
             set: function (val) { this.id = val; },
             enumerable: false,
             configurable: true
         });
         ;
         Object.defineProperty(SubformMagicComponent.prototype, "Component", {
-            /**
-             * @ignore
-             */
             get: function () {
                 return this.mgSub.mgGetComp(this.id);
             },
@@ -5048,9 +3963,6 @@
             configurable: true
         });
         Object.defineProperty(SubformMagicComponent.prototype, "Parameters", {
-            /**
-             * @ignore
-             */
             get: function () {
                 return this.mgSub.mgGetParameters(this.id);
             },
@@ -5059,8 +3971,8 @@
         });
         return SubformMagicComponent;
     }());
-    /** @nocollapse */ SubformMagicComponent.ɵfac = function SubformMagicComponent_Factory(t) { return new (t || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
-    /** @nocollapse */ 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) {
+    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);
             }
@@ -5068,7 +3980,7 @@
                 i0.ɵɵproperty("ngIf", ctx.Component);
             }
         }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(SubformMagicComponent, [{
                 type: i0.Component,
                 args: [{
@@ -5110,25 +4022,15 @@
         }
     }
     var _c1$1 = ["*"];
-    /**
-     * Represents a Magic subform
-     */
     var ErrorMagicComponent = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function ErrorMagicComponent(_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";
         }
         Object.defineProperty(ErrorMagicComponent.prototype, "magic", {
-            /**
-             * @ignore
-             */
             set: function (val) {
                 this.id = val;
             },
@@ -5153,10 +4055,6 @@
             configurable: true
         });
         ;
-        /**
-         * returns true if the html element has no children
-         * @param element
-         */
         ErrorMagicComponent.prototype.isEmpty = function (element) {
             var nodes = element.childNodes;
             for (var i = 0; i < nodes.length; i++) {
@@ -5167,9 +4065,6 @@
             }
             return true;
         };
-        /**
-         * @ignore
-         */
         ErrorMagicComponent.prototype.HasErrors = function (id) {
             var e_1, _a;
             if (!util.isUndefined(id)) {
@@ -5203,8 +4098,8 @@
         };
         return ErrorMagicComponent;
     }());
-    /** @nocollapse */ ErrorMagicComponent.ɵfac = function ErrorMagicComponent_Factory(t) { return new (t || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    /** @nocollapse */ ErrorMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) {
+    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$2, true);
             }
@@ -5221,7 +4116,7 @@
                 i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
             }
         }, directives: [i1.NgIf], encapsulation: 2 });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(ErrorMagicComponent, [{
                 type: i0.Component,
                 args: [{
@@ -5240,31 +4135,22 @@
                 }] });
     })();
 
-    /**
-     * Directive for checkboxes, to handle the 'change' event
-     */
     var CheckboxMagicDirective = /** @class */ (function () {
-        /**
-         * @ignore
-         */
         function CheckboxMagicDirective(magicDirective) {
             this.magicDirective = magicDirective;
         }
-        /**
-         * Handles the Checkbox 'change' event - pass it to the Magic engine
-         */
         CheckboxMagicDirective.prototype.onChange = function ($event) {
             this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
         };
         return CheckboxMagicDirective;
     }());
-    /** @nocollapse */ CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    /** @nocollapse */ CheckboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -5276,28 +4162,22 @@
                 }] });
     })();
 
-    /**
-     * Directive for comboboxes, to handle the 'change' event
-     */
     var ComboboxMagicDirective = /** @class */ (function () {
         function ComboboxMagicDirective(magicDirective) {
             this.magicDirective = magicDirective;
         }
-        /**
-         * Handles the Combobox 'change' event - pass it to the Magic engine
-         */
         ComboboxMagicDirective.prototype.onChange = function ($event) {
             this.magicDirective.task.onComboboxSelectionChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
         };
         return ComboboxMagicDirective;
     }());
-    /** @nocollapse */ ComboboxMagicDirective.ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    /** @nocollapse */ ComboboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: ComboboxMagicDirective, selectors: [["select", "magic", "", 3, "multiple", ""]], hostBindings: function ComboboxMagicDirective_HostBindings(rf, ctx) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(ComboboxMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -5309,23 +4189,17 @@
                 }] });
     })();
 
-    /**
-     * This service supports custom actions on magic exit
-     */
     var ExitMagicService = /** @class */ (function () {
         function ExitMagicService() {
         }
-        /**
-         * Override this method to implement custom logic on magic exit
-         */
         ExitMagicService.prototype.exitMagic = function () {
             console.log("Magic application terminated");
         };
         return ExitMagicService;
     }());
-    /** @nocollapse */ ExitMagicService.ɵfac = function ExitMagicService_Factory(t) { return new (t || ExitMagicService)(); };
-    /** @nocollapse */ ExitMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
-    /*@__PURE__*/ (function () {
+    ExitMagicService.ɵfac = function ExitMagicService_Factory(t) { return new (t || ExitMagicService)(); };
+    ExitMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
+    (function () {
         i0.ɵsetClassMetadata(ExitMagicService, [{
                 type: i0.Injectable
             }], null, null);
@@ -5359,19 +4233,7 @@
             i0.ɵɵelement(0, "div", 9);
         }
     }
-    /**
-     * Root Magic component
-     */
     var MagicShellComponent = /** @class */ (function () {
-        /**
-         *
-         * @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
-         */
         function MagicShellComponent(engineMagicService, componentList, changeDetectorRef, titleService, overlayWindowService, httpClient, pendingCommandsCollector, exitMagicService) {
             this.engineMagicService = engineMagicService;
             this.componentList = componentList;
@@ -5381,32 +4243,22 @@
             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
-         */
         MagicShellComponent.prototype.onBeforeUnload = function (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;
             }
         };
         MagicShellComponent.prototype.onUnload = function (event) {
-            // Chrome provides an opportunity to terminate the context after user approves the browser unload alert
             if (!this.magicEngineTerminated)
                 this.engineMagicService.TerminateContextUsingFetchAPI();
         };
@@ -5417,26 +4269,13 @@
         MagicShellComponent.prototype.setViewContainerRef = function (vcRef) {
             this.overlayWindowsContainerViewRef = vcRef;
         };
-        /**
-         * Initialization of Magic mechanisms
-         */
         MagicShellComponent.prototype.initialize = function () {
             this.registerUICommands();
         };
-        /**
-         * Set the title
-         */
         MagicShellComponent.prototype.setTitle = function () {
             var 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
-         */
         MagicShellComponent.prototype.setComponent = function (formName, taskId, taskDescription, isModal) {
             this.pendingCommandsCollector.startCollecting();
             if (isModal) {
@@ -5448,9 +4287,6 @@
             }
             this.changeDetectorRef.detectChanges();
         };
-        /**
-         * @ignore
-         */
         MagicShellComponent.prototype.registerUICommands = function () {
             var _this = this;
             this.engineMagicService.refreshDom.pipe(operators.filter(function (command) { return command.TaskTag === '0'; }))
@@ -5463,10 +4299,6 @@
                 GuiInteractiveExecutor.executeInteractiveCommand(null, command, _this.overlayWindowService);
             });
         };
-        /**
-         * Execute commands received from the Magic WebClient engine
-         * @param command
-         */
         MagicShellComponent.prototype.executeCommand = function (command) {
             switch (command.CommandType) {
                 case gui.CommandType.OPEN_FORM:
@@ -5481,7 +4313,7 @@
                         this.RootComponentParameters = {};
                         this.changeDetectorRef.detectChanges();
                     }
-                    else { // Close modal window
+                    else {
                         this.overlayWindowService.close(command.str);
                         this.changeDetectorRef.detectChanges();
                     }
@@ -5499,12 +4331,15 @@
                     if (this.exitMagicService)
                         this.exitMagicService.exitMagic();
                     break;
+                case gui.CommandType.SHOW_HTML_ERROR:
+                    window.document.write(command.str);
+                    break;
             }
         };
         return MagicShellComponent;
     }());
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) {
+    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$3, true);
             }
@@ -5516,9 +4351,7 @@
             if (rf & 1) {
                 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([
-            // 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) {
+        }, 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);
@@ -5534,14 +4367,12 @@
                 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    }"] });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(MagicShellComponent, [{
                 type: i0.Component,
                 args: [{
                         selector: 'magic-root',
-                        providers: [
-                        // ExitMagicService
-                        ],
+                        providers: [],
                         template: "\n    <div #magicRoot>\n      <ndc-dynamic\n        *ngIf = \"RootComponent !== null\"\n        [ndcDynamicComponent]=\"RootComponent\"\n        [ndcDynamicInputs]   =\"RootComponentParameters\">\n      </ndc-dynamic>\n\n      <div #overlayWindowsContainer magicViewContainerRef>\n      </div>\n    </div>\n\n    <div class=\"spinner-background\" *ngIf=\"showSpinner\">\n      <ng-container [ngTemplateOutlet]=\"SpinnerTemplate ? SpinnerTemplate:defaultSpinner\"></ng-container>\n    </div>\n\n    <ng-template #defaultSpinner>\n      <div class=\"mgSpinnerClass\"></div>\n    </ng-template>\n  ",
                         styles: ["\n    .mgSpinnerClass {\n      border: 10px solid #cccccc; /* Light grey */\n      border-top: 10px solid black; /* Blue */\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 {\n      /* background fixed across whole screen */\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    }\n  "]
                     }]
@@ -5563,17 +4394,11 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var CHECKBOX_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MagicCheckboxControlValueAccessor; }),
         multi: true,
     };
-    /**
-     * Value accessor for Checkbox without a FormControl
-     */
     var MagicCheckboxControlValueAccessor = /** @class */ (function (_super) {
         __extends(MagicCheckboxControlValueAccessor, _super);
         function MagicCheckboxControlValueAccessor() {
@@ -5581,14 +4406,14 @@
         }
         return MagicCheckboxControlValueAccessor;
     }(forms.CheckboxControlValueAccessor));
-    /** @nocollapse */ MagicCheckboxControlValueAccessor.ɵfac = function MagicCheckboxControlValueAccessor_Factory(t) { return ɵMagicCheckboxControlValueAccessor_BaseFactory(t || MagicCheckboxControlValueAccessor); };
-    /** @nocollapse */ 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) {
+    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] });
-    var ɵMagicCheckboxControlValueAccessor_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
-    /*@__PURE__*/ (function () {
+    var ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor);
+    (function () {
         i0.ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
                 type: i0.Directive,
                 args: [{
@@ -5599,17 +4424,11 @@
             }], null, null);
     })();
 
-    /**
-     * @ignore
-     */
     var MAGIC_DEFAULT_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MagicDefaultValueAccessor; }),
         multi: true
     };
-    /**
-     * @ignore
-     */
     var MagicDefaultValueAccessor = /** @class */ (function (_super) {
         __extends(MagicDefaultValueAccessor, _super);
         function MagicDefaultValueAccessor() {
@@ -5617,14 +4436,14 @@
         }
         return MagicDefaultValueAccessor;
     }(forms.DefaultValueAccessor));
-    /** @nocollapse */ MagicDefaultValueAccessor.ɵfac = function MagicDefaultValueAccessor_Factory(t) { return ɵMagicDefaultValueAccessor_BaseFactory(t || MagicDefaultValueAccessor); };
-    /** @nocollapse */ 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) {
+    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] });
-    var ɵMagicDefaultValueAccessor_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
-    /*@__PURE__*/ (function () {
+    var ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor);
+    (function () {
         i0.ɵsetClassMetadata(MagicDefaultValueAccessor, [{
                 type: i0.Directive,
                 args: [{
@@ -5641,28 +4460,22 @@
             }], null, null);
     })();
 
-    /**
-     * Directive for checkboxes which should not have a form control
-     */
     var CheckboxNoFormControlMagicDirective = /** @class */ (function () {
         function CheckboxNoFormControlMagicDirective(magicDirective) {
             this.magicDirective = magicDirective;
         }
-        /**
-         * Handle the 'Checkbox' change event - pass it to the Magic engine
-         */
         CheckboxNoFormControlMagicDirective.prototype.onChange = function ($event) {
             this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
         };
         return CheckboxNoFormControlMagicDirective;
     }());
-    /** @nocollapse */ CheckboxNoFormControlMagicDirective.ɵfac = function CheckboxNoFormControlMagicDirective_Factory(t) { return new (t || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    /** @nocollapse */ CheckboxNoFormControlMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: CheckboxNoFormControlMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", "noFormControl", ""]], hostBindings: function CheckboxNoFormControlMagicDirective_HostBindings(rf, ctx) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -5674,28 +4487,22 @@
                 }] });
     })();
 
-    /**
-     * Directive for non-checkbox input controls which do not have a form control
-     */
     var InputNoFormControlMagicDirective = /** @class */ (function () {
         function InputNoFormControlMagicDirective(magicDirective) {
             this.magicDirective = magicDirective;
         }
-        /**
-         * Handles the 'change' event - pass it to the Magic engine
-         */
         InputNoFormControlMagicDirective.prototype.onChange = function ($event) {
             this.magicDirective.task.setInputTextValue(this.magicDirective.id, this.magicDirective.rowId, event.srcElement.value);
         };
         return InputNoFormControlMagicDirective;
     }());
-    /** @nocollapse */ InputNoFormControlMagicDirective.ɵfac = function InputNoFormControlMagicDirective_Factory(t) { return new (t || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    /** @nocollapse */ 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) {
+    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 () {
+    (function () {
         i0.ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
                 type: i0.Directive,
                 args: [{
@@ -5712,14 +4519,6 @@
         useExisting: i0.forwardRef(function () { return 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>`
-     */
     var DateValueAccessor = /** @class */ (function () {
         function DateValueAccessor(renderer, elementRef) {
             this.renderer = renderer;
@@ -5727,7 +4526,6 @@
             this.onChange = function (_) { };
             this.onTouched = function () { };
         }
-        /** Writes a new value to the element (model -> view) */
         DateValueAccessor.prototype.writeValue = function (value) {
             if (!value) {
                 this.renderer.setProperty(this.elementRef.nativeElement, "value", null);
@@ -5735,29 +4533,26 @@
             }
             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) */
         DateValueAccessor.prototype.registerOnChange = function (fn) {
             this.onChange = function (v) { return fn(v instanceof Date
                 ? new Date(v.getUTCFullYear(), v.getUTCMonth(), v.getUTCDate())
                 : v); };
         };
-        /** Registers a callback function, called when the control is blurred */
         DateValueAccessor.prototype.registerOnTouched = function (fn) {
             this.onTouched = fn;
         };
-        /** Enables or disables the element when the control status changes */
         DateValueAccessor.prototype.setDisabledState = function (isDisabled) {
             this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
         };
         return DateValueAccessor;
     }());
-    /** @nocollapse */ DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    /** @nocollapse */ DateValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, selectors: [["", "dateInput", ""]], hostBindings: function DateValueAccessor_HostBindings(rf, ctx) {
+    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])] });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(DateValueAccessor, [{
                 type: i0.Directive,
                 args: [{
@@ -5773,25 +4568,12 @@
                 }] });
     })();
 
-    /**
-     * 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
-     */
     var NonMagicControlDirective = /** @class */ (function () {
-        /**
-         *
-         * @param _task The task service
-         * @param element The element for which the directive is applied
-         * @param renderer Renderer for the element
-         * @param vcRef
-         */
         function NonMagicControlDirective(_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;
@@ -5806,45 +4588,31 @@
         });
         ;
         Object.defineProperty(NonMagicControlDirective.prototype, "task", {
-            /**
-             * Get the task service
-             * @returns
-             */
             get: function () {
                 return this._task;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Register to the events this element may need to handle
-         */
         NonMagicControlDirective.prototype.regEvents = function () {
             var _this = this;
-            // Handle events for which event handler may be removed and restored
             this.eventHandlers['focusin'] = this.OnFocus.bind(this);
             Object.keys(this.eventHandlers).forEach(function (key) {
                 _this.focusUnlistener = _this.renderer.listen(_this.htmlElement, key, _this.eventHandlers[key]);
             });
         };
-        /**
-         * Handle focus event
-         */
         NonMagicControlDirective.prototype.OnFocus = function () {
             this.task.insertEvent(engine.getGuiEventObj('focusOnNonMagicControl', "", -1));
             event.cancelBubble = true;
         };
-        /**
-         * Initialize this object
-         */
         NonMagicControlDirective.prototype.ngOnInit = function () {
             this.regEvents();
         };
         return NonMagicControlDirective;
     }());
-    /** @nocollapse */ 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)); };
-    /** @nocollapse */ NonMagicControlDirective.ɵdir = i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: ["NonMagicControl", "magic"] } });
-    /*@__PURE__*/ (function () {
+    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: i0.Directive,
                 args: [{
@@ -5856,9 +4624,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var decs = [
         MagicDirective,
         CheckboxMagicDirective,
@@ -5889,9 +4654,6 @@
         MagicFocusDirective,
         MagicViewContainerRef
     ];
-    /**
-     * @ignore
-     */
     var MagicModule = /** @class */ (function () {
         function MagicModule() {
         }
@@ -5909,12 +4671,11 @@
         };
         return MagicModule;
     }());
-    /** @nocollapse */ MagicModule.ɵmod = i0.ɵɵdefineNgModule({ type: MagicModule });
-    /** @nocollapse */ MagicModule.ɵinj = i0.ɵɵ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: [[
                 i1.CommonModule,
                 forms.FormsModule,
                 forms.ReactiveFormsModule,
-                //ThemeModule,
                 i2.RouterModule,
                 i3.DynamicModule,
                 i5.HttpClientModule
@@ -5950,7 +4711,6 @@
                 MagicViewContainerRef], imports: [i1.CommonModule,
                 forms.FormsModule,
                 forms.ReactiveFormsModule,
-                //ThemeModule,
                 i2.RouterModule,
                 i3.DynamicModule,
                 i5.HttpClientModule], exports: [MagicDirective,
@@ -5982,7 +4742,7 @@
                 MagicFocusDirective,
                 MagicViewContainerRef] });
     })();
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(MagicModule, [{
                 type: i0.NgModule,
                 args: [{
@@ -5993,12 +4753,10 @@
                             i1.CommonModule,
                             forms.FormsModule,
                             forms.ReactiveFormsModule,
-                            //ThemeModule,
                             i2.RouterModule,
                             i3.DynamicModule,
                             i5.HttpClientModule
                         ],
-                        //Customizable providers
                         providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
                     }]
             }], null, null);
@@ -6089,7 +4847,7 @@
                 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 i1.formatDate(date, this.mgdtfmt, this.locale);
             }
             else {
@@ -6098,9 +4856,9 @@
         };
         return MgDateAdapter;
     }(core.NativeDateAdapter));
-    /** @nocollapse */ MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(i0.ɵɵinject(i1$2.Platform), i0.ɵɵinject(TaskMagicService)); };
-    /** @nocollapse */ MgDateAdapter.ɵprov = i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
-    /*@__PURE__*/ (function () {
+    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: i0.Injectable
             }], function () { return [{ type: i1$2.Platform }, { type: TaskMagicService }]; }, null);
@@ -6110,9 +4868,6 @@
         { provide: core.DateAdapter, useClass: MgDateAdapter },
         { provide: core.MAT_DATE_FORMATS, useValue: MG_FORMATS }
     ];
-    /**
-     * Magic service providers
-     */
     var basicMagicProviders = [
         MagicServices,
         TaskMagicService,
@@ -6125,20 +4880,9 @@
         TableMagicService
     ]);
 
-    /**
-     * @ignore
-     */
-    ///////////////////////////////////////////////////////////
-    // class to hold gui-related helper methods
-    ///////////////////////////////////////////////////////////
     var utils = /** @class */ (function () {
         function 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.
-        ///////////////////////////////////////////////////////////
         utils.addChildren = function (parent, children, selector) {
             for (var i = 0; i < parent.children.length; i++) {
                 if (typeof parent.children[i].attributes[selector] !== "undefined") {
@@ -6147,9 +4891,6 @@
                 this.addChildren(parent.children[i], children, selector);
             }
         };
-        ///////////////////////////////////////////////////////////
-        // Calculate the distance between the control and the supplied x,y coordinates
-        ///////////////////////////////////////////////////////////
         utils.getDistance = function (control, x, y) {
             var left = control.clientLeft, top = control.clientTop;
             var dx, dy;
@@ -6176,9 +4917,6 @@
             var ret = (dx * dx + dy * dy);
             return ret;
         };
-        ///////////////////////////////////////////////////////////
-        //
-        ///////////////////////////////////////////////////////////
         utils.getDimentions = function (el) {
             var xPos = 0;
             var yPos = 0;
@@ -6186,14 +4924,12 @@
             var height = el.height;
             while (el) {
                 if (el.tagName == "BODY") {
-                    // deal with browser quirks with body/window/document and page scroll
                     var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
                     var 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);
                 }
@@ -6209,9 +4945,6 @@
         return utils;
     }());
 
-    /**
-     * @ignore
-     */
     var ModalFormDefinition = /** @class */ (function () {
         function ModalFormDefinition() {
             this.taskId = "";
@@ -6221,10 +4954,6 @@
         return ModalFormDefinition;
     }());
 
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
     exports.AccessorMagicService = AccessorMagicService;
     exports.BaseMagicAlertComponent = BaseMagicAlertComponent;
     exports.BaseMagicConfirmComponent = BaseMagicConfirmComponent;