@magic-xpa/angular 4.800.0-dev480.13 → 4.800.0-dev480.133

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() {
         }
@@ -729,14 +669,10 @@
         [utils$1.MagicProperties.Wallpaper, "background-image"]
     ]);
 
-    /**
-     * @ignore
-     */
     var GuiInteractiveExecutor = /** @class */ (function () {
         function GuiInteractiveExecutor() {
         }
         GuiInteractiveExecutor.prototype.Run = function () {
-            // Sets the currentContextID
             try {
                 switch (this.command._commandType) {
                     case gui.InteractiveCommandType.GET_VALUE:
@@ -767,7 +703,6 @@
             }
             catch (ex) {
                 throw ex;
-                //want to see all the exceptions for now
             }
         };
         GuiInteractiveExecutor.executeInteractiveCommand = function (task, guiIntactiveCommand, overlayService) {
@@ -848,30 +783,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 +811,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 +839,6 @@
                 }] });
     })();
 
-    /**
-     * Directive for setting focus on element
-     */
     var MagicFocusDirective = /** @class */ (function () {
         function MagicFocusDirective(hostElement) {
             this.hostElement = hostElement;
@@ -938,9 +848,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 +859,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 +881,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 +943,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 +968,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 +990,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 +1002,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 +1019,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 +1030,6 @@
                 alert(titleAndString);
                 okWasPressed = true;
             }
-            // return the result from the user
             return okWasPressed;
         };
         return confirmationBox;
@@ -1198,38 +1063,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 +1083,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 +1091,6 @@
             else
                 return "";
         };
-        /**
-         * Returns CSS styles for the window
-         * @returns
-         */
         MagicOverlayContainer.prototype.getStyle = function () {
             var styles = {};
             if (this.componentRef != undefined) {
@@ -1270,10 +1107,6 @@
             }
             return styles;
         };
-        /**
-         * Returns the CSS styles for the client area
-         * @returns
-         */
         MagicOverlayContainer.prototype.getClientAreaStyles = function () {
             var styles = {};
             if (this.componentRef != undefined) {
@@ -1289,25 +1122,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 +1138,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 +1175,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 +1198,6 @@
                 }] });
     })();
 
-    /**
-     * Service managing overlay windows
-     * This is Magic's default provider
-     */
     var OverlayContainerMagicProvider = /** @class */ (function () {
         function OverlayContainerMagicProvider() {
         }
@@ -1387,17 +1206,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 +1221,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 +1246,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 +1258,6 @@
             }], null, null);
     })();
 
-    /***
-     * This is sample component for the confirmation box
-     */
     var MagicConfirmationBoxComponent = /** @class */ (function (_super) {
         __extends(MagicConfirmationBoxComponent, _super);
         function MagicConfirmationBoxComponent() {
@@ -1452,8 +1265,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 +1294,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 +1306,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 +1343,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 +1353,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 +1376,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 +1388,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 +1398,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 +1533,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 +1583,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 +1596,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 +1613,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 +1646,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 +1658,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 +1704,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 +1713,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 +1732,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 +1783,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 +1833,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;
@@ -2294,12 +1884,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 +1914,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 +1962,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 +2004,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 +2017,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 +2035,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 +2053,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,15 +2068,9 @@
                 else
                     indexes[i] = (selectedOptions[i]).value;
             }
-            guiEvent.Value = indexes; // TODO: fix
+            guiEvent.Value = indexes;
             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;
@@ -2554,21 +2086,11 @@
             }
             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);
@@ -2578,28 +2100,15 @@
                 guiEvent.Value = result.value;
             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,
@@ -2611,9 +2120,6 @@
             console.log(text);
             this.saveData(text);
         };
-        /**
-         * @ignore
-         */
         TaskMagicService.prototype.loadStubData = function (stubData) {
             this.Records = stubData.records;
             this.settemplate(stubData.template);
@@ -2621,15 +2127,9 @@
             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 {
@@ -2642,17 +2142,14 @@
         };
         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 () {
+    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: EngineMagicService }, { type: OverlayWindowService }]; }, null);
     })();
 
-    /**
-     * @ignore
-     */
     var CommandsCollectorMagicService = /** @class */ (function () {
         function CommandsCollectorMagicService(magic) {
             this.magic = magic;
@@ -2687,25 +2184,19 @@
         };
         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 () {
+    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);
     })();
 
-    /**
-     * @ignore
-     */
     var RouteCommand = /** @class */ (function () {
         function RouteCommand() {
         }
         return RouteCommand;
     }());
-    /**
-     * @ignore
-     */
     var RouterCommandsMagicService = /** @class */ (function () {
         function RouterCommandsMagicService() {
             this.pendingRouteCommands = [];
@@ -2721,17 +2212,14 @@
         };
         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 () {
+    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);
     })();
 
-    /**
-     * Service for managing subforms and routing
-     */
     var SubformMagicService = /** @class */ (function () {
         function SubformMagicService(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService) {
             this.task = task;
@@ -2740,15 +2228,10 @@
             this.pendingCommandsCollector = pendingCommandsCollector;
             this.router = router;
             this.routerCommandsMagicService = routerCommandsMagicService;
-            this.subformsDict /*:{ [x: string]: SubformDefinition }*/ = {};
-            this.routesDict = {}; // dictionary of router outlet to router path
+            this.subformsDict = {};
+            this.routesDict = {};
             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;
@@ -2757,11 +2240,6 @@
             }
             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;
@@ -2769,9 +2247,6 @@
             else
                 return "";
         };
-        /**
-         * @ignore
-         */
         SubformMagicService.prototype.deleteSubformComp = function (subformControlName, formName) {
             if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
                 if (this.subformsDict[subformControlName].formName === formName) {
@@ -2780,13 +2255,10 @@
                 }
             }
         };
-        /**
-         * @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 (util.isNullOrUndefined(routerPath)) {
                 if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
                     if (this.subformsDict[subformControlName].formName === formName) {
                         this.subformsDict[subformControlName] = {};
@@ -2797,10 +2269,9 @@
                     formName: formName,
                     parameters: { taskIdParam: taskId, taskDescription: taskDescription }
                 };
-                //this.ref.detectChanges();
                 refreshNeeded = true;
             }
-            else { // call route
+            else {
                 if (inDefaultOutlet)
                     subformControlName = "primary";
                 var routeParams = new mscorelib.List();
@@ -2815,10 +2286,6 @@
                     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
@@ -2827,17 +2294,12 @@
             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;
@@ -2878,13 +2340,8 @@
                 }
             });
         };
-        /**
-         * @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); });
@@ -2892,15 +2349,9 @@
             }
             this.pendingCommandsCollector.stopCollecting();
         };
-        /**
-         * @ignore
-         */
         SubformMagicService.prototype.refreshView = function () {
             this.task.refreshView();
         };
-        ///
-        // return the relative route
-        //
         SubformMagicService.getRelativeRoute = function (sendActivatedRoute) {
             var currentActiveRoute = sendActivatedRoute;
             if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
@@ -2914,72 +2365,39 @@
     }());
     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 () {
+    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)); };
+    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 }]; }, 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 +2405,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 +2423,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 +2436,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 +2475,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,118 +2535,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);
         };
-        /**
-         * Gets the selection control's selected value
-         * @param controlId Id of control
-         * @param rowId Id of row, if applicable
-         * @returns
-         */
-        // getSelectedValue
+        AccessorMagicService.prototype.getZoomButtonTitle = function (controlId, rowId) {
+            return this.task.getProperty(controlId, gui.HtmlProperties.ZoomButtonTooltip, rowId);
+        };
         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);
@@ -3353,22 +2604,9 @@
             }
             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.getDisplayValue = function (id, rowId) {
             var displayValue = "";
             var o = this.getProperty(id, gui.HtmlProperties.ItemsList, rowId);
@@ -3377,12 +2615,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");
@@ -3402,40 +2634,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;
@@ -3443,48 +2653,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);
@@ -3517,12 +2704,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;
@@ -3531,31 +2712,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;
@@ -3563,13 +2730,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)) {
@@ -3585,23 +2750,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;
@@ -3615,36 +2783,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;
             },
@@ -3652,10 +2805,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "mgSub", {
-            /**
-             * Returns the Magic subform service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.subformService;
             },
@@ -3663,10 +2812,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "tableService", {
-            /**
-             * Returns the Magic table service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.tableService;
             },
@@ -3674,10 +2819,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "mg", {
-            /**
-             * Returns the Magic accessor service
-             * @returns
-             */
             get: function () {
                 return this.magicServices.mgAccessorService;
             },
@@ -3685,10 +2826,6 @@
             configurable: true
         });
         Object.defineProperty(TaskBaseMagicComponent.prototype, "taskId", {
-            /**
-             * Returns the task Id
-             * @returns
-             */
             get: function () {
                 return this.task.taskId;
             },
@@ -3696,19 +2833,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) {
@@ -3717,48 +2847,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();
         };
@@ -3768,17 +2869,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: [{
@@ -3793,22 +2891,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
@@ -3824,16 +2913,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();
             }
@@ -3846,13 +2926,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: [{
@@ -3867,35 +2947,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;
         }
@@ -3909,9 +2970,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;
@@ -3921,31 +2979,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) {
-                    _this.task.insertEvent(engine.getGuiEventObj(event, _this.id, +_this.rowId));
+                    var fromButton = false;
+                    if (_this.htmlElement instanceof HTMLButtonElement)
+                        fromButton = true;
+                    _this.task.insertEvent(engine.getGuiEventObj(event, _this.id, +_this.rowId, fromButton));
                     e.cancelBubble = true;
                 });
             });
@@ -3957,13 +3009,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);
@@ -3989,25 +3038,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))
@@ -4016,17 +3056,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
@@ -4049,17 +3081,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:
@@ -4067,14 +3092,12 @@
                     break;
                 case gui.CommandType.SET_FOCUS:
                     this.focusUnlistener();
-                    this.htmlElement.focus();
+                    if (!(command.obj.ConnectedControl && this.htmlElement instanceof HTMLButtonElement))
+                        this.htmlElement.focus();
                     this.focusUnlistener = this.renderer.listen(this.htmlElement, 'focusin', this.eventHandlers['focusin']);
                     break;
             }
         };
-        /**
-         * handle the interactive commands like CallJS
-         */
         MagicDirective.prototype.handleInteractiveCommands = function (command) {
             switch (command._commandType) {
                 case gui.InteractiveCommandType.CALL_JS:
@@ -4084,24 +3107,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:
@@ -4112,18 +3129,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: [{
@@ -4144,9 +3158,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var NoControlMagicDirective = /** @class */ (function (_super) {
         __extends(NoControlMagicDirective, _super);
         function NoControlMagicDirective(_task, element, renderer, vcRef, magicRow) {
@@ -4187,12 +3198,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";
@@ -4201,7 +3210,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);
@@ -4214,7 +3222,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") {
@@ -4238,7 +3246,6 @@
                     break;
             }
         };
-        // handle set-property commands
         NoControlMagicDirective.prototype.handleSetProperty = function (command) {
             var e_1, _a;
             _super.prototype.handleSetProperty.call(this, command);
@@ -4255,7 +3262,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);
@@ -4307,8 +3313,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 {
@@ -4316,7 +3321,6 @@
                                 }
                             }
                             else {
-                                // not a buton - hide unselected tabpages
                                 var style = (layer == command.obj1) ? 'display: inline' : 'display: none';
                                 child.setAttribute('style', style);
                             }
@@ -4339,9 +3343,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: [{
@@ -4357,20 +3361,7 @@
                 }] });
     })();
 
-    /**
-     * 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;
@@ -4383,9 +3374,6 @@
             this.componentRef = null;
             this.parentMgSubformService = null;
         }
-        /**
-         * Initialization
-         */
         RouterContainerMagicComponent.prototype.ngOnInit = function () {
             var outletname = this.activatedRoute.outlet;
             var subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
@@ -4403,10 +3391,7 @@
             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, "/:");
@@ -4420,7 +3405,6 @@
         };
         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);
@@ -4433,9 +3417,6 @@
                 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)
@@ -4446,12 +3427,7 @@
                 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);
@@ -4460,9 +3436,9 @@
         };
         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 () {
+    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)); };
+    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: [{
@@ -4472,18 +3448,12 @@
             }], 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) {
@@ -4497,7 +3467,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;
@@ -4512,9 +3481,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: [{
@@ -4583,18 +3552,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;
@@ -4602,20 +3565,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) {
@@ -4640,10 +3595,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;
@@ -4661,9 +3612,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) {
@@ -4689,9 +3637,6 @@
                 control.setValue(valueStr.ToString());
             }
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.formatBoolean = function (control) {
             var value = control.value;
             if (value !== null && value.length > 0) {
@@ -4704,12 +3649,6 @@
                 }
             }
         };
-        /**
-         * @ignore
-         */
-        /// <summary>
-        /// generate pattern from  fld's  format
-        /// </summary>
         MgformatMagicDirective.prototype.generatePattern = function (attribute, pic) {
             var pattern = "";
             switch (attribute) {
@@ -4723,12 +3662,6 @@
             }
             return pattern;
         };
-        /**
-         * @ignore
-         */
-        /// <summary>
-        /// generate pattern for Alpha
-        /// </summary>
         MgformatMagicDirective.prototype.generatePatternForNumber = function (pic) {
             var patternStr = new mscorelib.StringBuilder();
             patternStr.Append("^");
@@ -4741,9 +3674,6 @@
             patternStr.Append("$");
             return patternStr.ToString();
         };
-        /**
-         * @ignore
-         */
         MgformatMagicDirective.prototype.isPatternGenerationNeeded = function (attr, pic) {
             switch (attr) {
                 case utils$1.StorageAttribute.NUMERIC:
@@ -4753,12 +3683,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;
@@ -4769,7 +3693,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("(");
@@ -4815,13 +3738,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++;
@@ -4830,9 +3749,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])
@@ -4841,13 +3757,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: [{
@@ -4862,9 +3778,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var TimeMagicPipe = /** @class */ (function (_super) {
         __extends(TimeMagicPipe, _super);
         function TimeMagicPipe(_task) {
@@ -4903,9 +3816,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: [{
@@ -4914,24 +3827,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);
@@ -4953,24 +3853,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: [{
@@ -4995,36 +3892,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);
             },
@@ -5032,9 +3913,6 @@
             configurable: true
         });
         Object.defineProperty(SubformMagicComponent.prototype, "Parameters", {
-            /**
-             * @ignore
-             */
             get: function () {
                 return this.mgSub.mgGetParameters(this.id);
             },
@@ -5043,8 +3921,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);
             }
@@ -5052,7 +3930,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: [{
@@ -5094,25 +3972,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;
             },
@@ -5137,10 +4005,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++) {
@@ -5151,9 +4015,6 @@
             }
             return true;
         };
-        /**
-         * @ignore
-         */
         ErrorMagicComponent.prototype.HasErrors = function (id) {
             var e_1, _a;
             if (!util.isUndefined(id)) {
@@ -5187,8 +4048,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);
             }
@@ -5205,7 +4066,7 @@
                 i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
             }
         }, directives: [i1.NgIf], encapsulation: 2 });
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(ErrorMagicComponent, [{
                 type: i0.Component,
                 args: [{
@@ -5224,31 +4085,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: [{
@@ -5260,28 +4112,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: [{
@@ -5293,23 +4139,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);
@@ -5343,19 +4183,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;
@@ -5365,32 +4193,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();
         };
@@ -5401,26 +4219,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) {
@@ -5432,9 +4237,6 @@
             }
             this.changeDetectorRef.detectChanges();
         };
-        /**
-         * @ignore
-         */
         MagicShellComponent.prototype.registerUICommands = function () {
             var _this = this;
             this.engineMagicService.refreshDom.pipe(operators.filter(function (command) { return command.TaskTag === '0'; }))
@@ -5447,10 +4249,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:
@@ -5465,7 +4263,7 @@
                         this.RootComponentParameters = {};
                         this.changeDetectorRef.detectChanges();
                     }
-                    else { // Close modal window
+                    else {
                         this.overlayWindowService.close(command.str);
                         this.changeDetectorRef.detectChanges();
                     }
@@ -5483,12 +4281,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);
             }
@@ -5500,9 +4301,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);
@@ -5518,14 +4317,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  "]
                     }]
@@ -5547,17 +4344,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() {
@@ -5565,14 +4356,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: [{
@@ -5583,17 +4374,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() {
@@ -5601,14 +4386,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: [{
@@ -5625,28 +4410,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: [{
@@ -5658,28 +4437,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: [{
@@ -5696,14 +4469,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;
@@ -5711,7 +4476,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);
@@ -5719,29 +4483,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: [{
@@ -5757,25 +4518,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;
@@ -5790,45 +4538,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: [{
@@ -5840,9 +4574,6 @@
                 }] });
     })();
 
-    /**
-     * @ignore
-     */
     var decs = [
         MagicDirective,
         CheckboxMagicDirective,
@@ -5873,9 +4604,6 @@
         MagicFocusDirective,
         MagicViewContainerRef
     ];
-    /**
-     * @ignore
-     */
     var MagicModule = /** @class */ (function () {
         function MagicModule() {
         }
@@ -5893,12 +4621,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
@@ -5934,7 +4661,6 @@
                 MagicViewContainerRef], imports: [i1.CommonModule,
                 forms.FormsModule,
                 forms.ReactiveFormsModule,
-                //ThemeModule,
                 i2.RouterModule,
                 i3.DynamicModule,
                 i5.HttpClientModule], exports: [MagicDirective,
@@ -5966,7 +4692,7 @@
                 MagicFocusDirective,
                 MagicViewContainerRef] });
     })();
-    /*@__PURE__*/ (function () {
+    (function () {
         i0.ɵsetClassMetadata(MagicModule, [{
                 type: i0.NgModule,
                 args: [{
@@ -5977,12 +4703,10 @@
                             i1.CommonModule,
                             forms.FormsModule,
                             forms.ReactiveFormsModule,
-                            //ThemeModule,
                             i2.RouterModule,
                             i3.DynamicModule,
                             i5.HttpClientModule
                         ],
-                        //Customizable providers
                         providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
                     }]
             }], null, null);
@@ -6073,7 +4797,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 {
@@ -6082,9 +4806,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);
@@ -6094,9 +4818,6 @@
         { provide: core.DateAdapter, useClass: MgDateAdapter },
         { provide: core.MAT_DATE_FORMATS, useValue: MG_FORMATS }
     ];
-    /**
-     * Magic service providers
-     */
     var basicMagicProviders = [
         MagicServices,
         TaskMagicService,
@@ -6109,20 +4830,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") {
@@ -6131,9 +4841,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;
@@ -6160,9 +4867,6 @@
             var ret = (dx * dx + dy * dy);
             return ret;
         };
-        ///////////////////////////////////////////////////////////
-        //
-        ///////////////////////////////////////////////////////////
         utils.getDimentions = function (el) {
             var xPos = 0;
             var yPos = 0;
@@ -6170,14 +4874,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);
                 }
@@ -6193,9 +4895,6 @@
         return utils;
     }());
 
-    /**
-     * @ignore
-     */
     var ModalFormDefinition = /** @class */ (function () {
         function ModalFormDefinition() {
             this.taskId = "";
@@ -6205,10 +4904,6 @@
         return ModalFormDefinition;
     }());
 
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
     exports.AccessorMagicService = AccessorMagicService;
     exports.BaseMagicAlertComponent = BaseMagicAlertComponent;
     exports.BaseMagicConfirmComponent = BaseMagicConfirmComponent;