@magic-xpa/angular 4.1200.0-dev4120.15 → 4.1200.0-dev4120.151

package/fesm2022/magic-xpa-angular.mjs

@@ -1,6 +1,6 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Output, Directive, EventEmitter, ViewChild, InjectionToken, Inject, HostListener, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Output, Directive, EventEmitter, HostListener, ViewChild, InjectionToken, Inject, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DatePipe, CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@angular/router';
@@ -8,20 +8,25 @@ import { NavigationEnd, RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from 'ng-dynamic-component';
 import { DynamicModule } from 'ng-dynamic-component';
-import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
+import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, Events, Modifiers } from '@magic-xpa/gui';
 import { MagicBridge, getGuiEventObj, CookieService, Environment, LastFocusedManager } from '@magic-xpa/engine';
-import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
+import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, MsgInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
 import { Subject, EMPTY, fromEvent } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { DragDropModule, CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { maskitoTimeOptionsGenerator } from '@maskito/kit';
-import * as i2$1 from '@angular/cdk/platform';
+import * as i2$2 from '@angular/cdk/platform';
 import { MaskitoModule } from '@maskito/angular';
 import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 
+/**
+ * @ignore
+ */
 class ControlMetadata {
     controlType;
     dataType;
@@ -31,9 +36,11 @@ class ControlMetadata {
     removedClass;
     classes;
     rangeValidator;
+    // user properties
     userProperties = new Map();
     customValidators = new Map();
     setClass(key, value) {
+        // for no-control - hold the name of the class to be removed later
         if (this.classesMap.has(key)) {
             this.removedClass = this.classesMap.get(key);
         }
@@ -48,8 +55,13 @@ class ControlMetadata {
         this.stylesMap.set(key, value);
     }
 }
+/**
+ * @ignore
+ */
 class ControlsMetadata {
+    //values of control
     values = new Map();
+    // dictionary of controls with there properties
     ControlsProperties = new Map();
     rowId;
     isCreated = false;
@@ -63,6 +75,8 @@ class ControlsMetadata {
         return this.ControlsProperties.get(controlId);
     }
     update(obj) {
+        //should we keep the values here ?
+        //this.values = obj.ControlsValues;
         let props = obj.ControlsMetaData;
         for (let controlName in props) {
             if (!this.ControlsProperties.has(controlName))
@@ -91,15 +105,18 @@ class ControlsMetadata {
         return this.values.get(controlName);
     }
 }
+/**
+ * @ignore
+ */
 class Records {
     data = new Map();
-    list = [];
+    list = []; //used for sequential access in table
     includesFirst;
     includesLast;
     guiTopIndex;
     recordsBeforeCurrentView = 0;
     isEmptyDataView = false;
-    sizeUpdated = false;
+    sizeUpdated = false; //used for evaluating the RecordsSizeChange.
     getRow(dvRowId) {
         return this.list[dvRowId + this.recordsBeforeCurrentView];
     }
@@ -122,14 +139,24 @@ class Records {
         }
         return false;
     }
+    /*
+    * for row editing
+    * */
     startRowEditing(guiRowId) {
         if (guiRowId < this.list.length && this.data.has(guiRowId))
             this.data.get(guiRowId).isEditing = true;
     }
+    /*
+    * stop row editing on row Id
+    * */
     stopRowEditing(guiRowId) {
         if (guiRowId < this.list.length && this.data.has(guiRowId))
             this.data.get(guiRowId).isEditing = false;
     }
+    /*
+    * return if row is in editing
+    * Called by the HTML code, so parameter is a string, not a numebr
+    * */
     isRowInRowEditing(guiRowId) {
         if (+guiRowId < this.list.length) {
             if (!this.data.has(+guiRowId) || isNullOrUndefined(this.data.get(+guiRowId)))
@@ -158,6 +185,7 @@ class Records {
     updateSize(len) {
         if (this.list.length != len) {
             if (len < this.list.length) {
+                //remove rows
                 for (let i = len; i < this.list.length; i++) {
                     this.data.delete(i);
                 }
@@ -166,6 +194,10 @@ class Records {
             this.sizeUpdated = true;
         }
     }
+    /**
+     * crears data for the first record
+     * @param template
+     */
     clearFirstTableRecord(template) {
         if (this.list.length >= 1) {
             for (const key in template) {
@@ -196,6 +228,9 @@ class Records {
         return this.guiTopIndex;
     }
 }
+/**
+ * @ignore
+ */
 var HtmlClasses;
 (function (HtmlClasses) {
     HtmlClasses["Color"] = "color";
@@ -204,6 +239,9 @@ var HtmlClasses;
     HtmlClasses["HintColor"] = "hintcolor";
 })(HtmlClasses || (HtmlClasses = {}));
 
+/**
+ * @ignore
+ */
 class StylesMapManager {
     static StylesMap = new Map([
         [MagicProperties.LineDivider, new Map([[true, "solid"], [false, "hidden"]])],
@@ -230,10 +268,15 @@ class StylesMapManager {
     }
 }
 
+/**
+ * @ignore
+ */
 class EngineMagicService {
     magicBridge = MagicBridge;
     isStub = false;
+    // true when user is logged in magic
     isLoggedIn = false;
+    //TODO - unregister
     refreshDom = new Subject();
     interactiveCommands = new Subject();
     startMagicEngine(httpClient, args) {
@@ -273,6 +316,12 @@ class EngineMagicService {
     GetControlPictureMask(taskId, controlName) {
         return this.magicBridge.GetControlPictureMask(taskId, controlName);
     }
+    UploadFileToServer(fileContent, serverFileName) {
+        return this.magicBridge.UploadFileToServer(fileContent, serverFileName);
+    }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.magicBridge.DownloadFileFromServer(serverFileName);
+    }
     GetFormattedValue(taskId, controlName, value, rowId) {
         return this.magicBridge.GetFormattedValue(taskId, controlName, value, rowId);
     }
@@ -283,6 +332,7 @@ class EngineMagicService {
         return this.magicBridge.GetFldRanges(taskId, controlName);
     }
     saveData(data) {
+        //this.magicBridge.saveData(data);
     }
     getIsLoggedIn() {
         return this.isLoggedIn;
@@ -296,8 +346,8 @@ class EngineMagicService {
     TerminateContextUsingFetchAPI() {
         this.magicBridge.TerminateContextUsingFetchAPI();
     }
-    static ɵfac = function EngineMagicService_Factory(t) { return new (t || EngineMagicService)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function EngineMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EngineMagicService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: EngineMagicService, factory: EngineMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EngineMagicService, [{
         type: Injectable,
@@ -306,8 +356,17 @@ class EngineMagicService {
             }]
     }], null, null); })();
 
+/**
+ * Manages the list of components in a project, and the project title
+ */
 class ComponentListMagicService {
+    /**
+     * Map of project components
+     */
     components = new Map();
+    /**
+     * Map of project dialogs
+     */
     dialogs = new Map();
     lazyLoadModulesMap = null;
     getData(name, mustHaveData) {
@@ -320,6 +379,11 @@ class ComponentListMagicService {
             data = this.components.get(name);
         return data;
     }
+    /**
+     * Return a component according to name
+     * @param name Name of requested component
+     * @returns The requested component
+     */
     getComponent(name, mustHaveData = true) {
         let data = this.getData(name, mustHaveData);
         return data ? data.component : null;
@@ -330,17 +394,30 @@ class ComponentListMagicService {
             this.components.set(key, data);
         }
     }
+    /**
+    * Return a component according to name
+    * @param name Name of requested component
+    * @returns The requested component
+    */
     getModuleRef(name) {
         let data = this.getData(name, false);
         return data ? data.moduleRef : null;
         ;
     }
+    /**
+     * Return the lazy load module details of the specified component
+     * @param name: Name of requested component
+     * @returns: lazy load module details
+     */
     getLazyLoadModuleData(name) {
         return (this.lazyLoadModulesMap != null && this.lazyLoadModulesMap.hasOwnProperty(name)) ? this.lazyLoadModulesMap[name] : null;
     }
+    /**
+       * Project title
+       */
     title;
-    static ɵfac = function ComponentListMagicService_Factory(t) { return new (t || ComponentListMagicService)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: ComponentListMagicService, factory: ComponentListMagicService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function ComponentListMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentListMagicService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ComponentListMagicService, factory: ComponentListMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentListMagicService, [{
         type: Injectable,
@@ -349,6 +426,9 @@ class ComponentListMagicService {
             }]
     }], null, null); })();
 
+/**
+ * @ignore
+ */
 class CommandsCollectorMagicService {
     magic;
     count = 0;
@@ -380,8 +460,8 @@ class CommandsCollectorMagicService {
         commands.forEach(command => { this.commands.Remove(command); });
         return commands;
     }
-    static ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function CommandsCollectorMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
         type: Injectable,
@@ -390,6 +470,9 @@ class CommandsCollectorMagicService {
             }]
     }], () => [{ type: EngineMagicService }], null); })();
 
+/**
+ * @ignore
+ */
 class RouteCommand {
     callerMgSubformServiceRef;
     routerOutletName;
@@ -397,6 +480,9 @@ class RouteCommand {
     parameters;
     routeParams;
 }
+/**
+ * @ignore
+ */
 class RouterCommandsMagicService {
     pendingRouteCommands = [];
     AddRouteCommand(routeCommand) {
@@ -408,8 +494,8 @@ class RouterCommandsMagicService {
             pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
         }
     }
-    static ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function RouterCommandsMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RouterCommandsMagicService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RouterCommandsMagicService, [{
         type: Injectable,
@@ -422,8 +508,8 @@ class MagicLazyLoaderService {
     Load(path) {
         return Promise.reject('error in loading module :' + path);
     }
-    static ɵfac = function MagicLazyLoaderService_Factory(t) { return new (t || MagicLazyLoaderService)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: MagicLazyLoaderService, factory: MagicLazyLoaderService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function MagicLazyLoaderService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicLazyLoaderService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicLazyLoaderService, factory: MagicLazyLoaderService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicLazyLoaderService, [{
         type: Injectable,
@@ -432,6 +518,9 @@ class MagicLazyLoaderService {
             }]
     }], null, null); })();
 
+/**
+ * Service for managing subforms and routing
+ */
 class SubformMagicService {
     task;
     activatedRoute;
@@ -443,8 +532,8 @@ class SubformMagicService {
     loader;
     injector;
     compiler;
-    subformsDict = {};
-    routesDict = {};
+    subformsDict /*:{ [x: string]: SubformDefinition }*/ = {};
+    routesDict = {}; // dictionary of router outlet to router path
     currentRouteDefinition = null;
     static currentCallerMgSubformServiceRef = null;
     static routerContainers = new Array();
@@ -460,6 +549,11 @@ class SubformMagicService {
         this.injector = injector;
         this.compiler = compiler;
     }
+    /**
+     * Finds and returns the component according to the subform name
+     * @param subformName
+     * @returns
+     */
     mgGetComp(subformName) {
         if (subformName in this.subformsDict) {
             let formName = this.subformsDict[subformName].formName;
@@ -468,6 +562,11 @@ class SubformMagicService {
         }
         return null;
     }
+    /**
+     * Returns the parameters of the subform
+     * @param subformName
+     * @returns
+     */
     mgGetParameters(subformName) {
         if (subformName in this.subformsDict) {
             return this.subformsDict[subformName].parameters;
@@ -475,6 +574,9 @@ class SubformMagicService {
         else
             return '';
     }
+    /**
+     * @ignore
+     */
     deleteSubformComp(subformControlName, formName) {
         if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
             if (this.subformsDict[subformControlName].formName === formName) {
@@ -483,22 +585,27 @@ class SubformMagicService {
             }
         }
     }
+    /**
+     * @ignore
+     */
     addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
         this.pendingCommandsCollector.startCollecting();
         let refreshNeeded = false;
-        if (isNullOrUndefined(routerPath)) {
+        if (isNullOrUndefined(routerPath)) { // call in destination subform
             if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
                 if (this.subformsDict[subformControlName].formName === formName) {
                     this.subformsDict[subformControlName] = {};
                     this.task.refreshView();
                 }
             }
+            // Load the lazy load module, if needed
             let moduleRef = this.componentListMagicService.getModuleRef(formName);
             if (moduleRef == null) {
                 let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(formName);
                 if (lazyLoadModule != null) {
                     const Magic = 'Magic';
                     const Module = 'Module';
+                    // extract name of module(XX) from 'MagicXXModule'
                     const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                     this.loader.Load(moduleName).then(m => {
                         const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
@@ -516,10 +623,11 @@ class SubformMagicService {
                     formName,
                     parameters: { taskIdParam: taskId, taskDescription: taskDescription }
                 };
+                //this.ref.detectChanges();
                 refreshNeeded = true;
             }
         }
-        else {
+        else { // call route
             if (inDefaultOutlet)
                 subformControlName = 'primary';
             let routeParams = new List();
@@ -534,6 +642,10 @@ class SubformMagicService {
                 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
@@ -542,10 +654,15 @@ class SubformMagicService {
         if (refreshNeeded)
             this.task.refreshView();
     }
+    /**
+     * Open the subform using a route command
+     */
     ExecuteRouteCommand(routeCommand) {
         let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
         let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
         if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
+            // If the specified router outlet already hosts the same router path, router.navigate() doesn't actually navigate.
+            // So, first clear the outlet (passing null route params, clears the outlet) and then navigate again.
             currentSubformMagicService.router.navigate([{ outlets: { [routeCommand.routerOutletName]: null } }], { relativeTo: relativeRoute })
                 .then((result) => {
                 SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
@@ -585,7 +702,12 @@ class SubformMagicService {
             }
         });
     }
+    /**
+     * @ignore
+     */
     init() {
+        // If commands were issued for this task before ngOnInit(), they were not executed because task had not registered for them.
+        // So, execute them now.
         const pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
         if (pendingCommands.length > 0) {
             pendingCommands.forEach(command => { this.task.executeCommand(command); });
@@ -593,9 +715,15 @@ class SubformMagicService {
         }
         this.pendingCommandsCollector.stopCollecting();
     }
+    /**
+     * @ignore
+     */
     refreshView() {
         this.task.refreshView();
     }
+    ///
+    // return the relative route
+    //
     static getRelativeRoute(sendActivatedRoute) {
         let currentActiveRoute = sendActivatedRoute;
         if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
@@ -605,13 +733,16 @@ class SubformMagicService {
         }
         return currentActiveRoute;
     }
-    static ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function SubformMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicService, [{
         type: Injectable
     }], () => [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.Compiler }], null); })();
 
+/**
+ * Mock component, implements routing by connecting the requested URL with the appropriate Magic task
+ */
 class RouterContainerMagicComponent {
     activatedRoute;
     router;
@@ -627,6 +758,16 @@ class RouterContainerMagicComponent {
     static get LastRoute() {
         return RouterContainerMagicComponent.lastRoute;
     }
+    /**
+     *
+     * @param changeDetectorRef
+     * @param activatedRoute
+     * @param magic
+     * @param componentFactoryResolver
+     * @param viewContainerRef
+     * @param componentList
+     * @param pendingCommandsCollector
+     */
     constructor(activatedRoute, router, magic, containerTaskService, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
         this.activatedRoute = activatedRoute;
         this.router = router;
@@ -637,6 +778,9 @@ class RouterContainerMagicComponent {
         this.pendingCommandsCollector = pendingCommandsCollector;
         this.routerCommandsMagicService = routerCommandsMagicService;
     }
+    /**
+     * Initialization
+     */
     ngOnInit() {
         let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
         let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
@@ -654,7 +798,10 @@ class RouterContainerMagicComponent {
         guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
         if (currentActiveRoute.snapshot.outlet !== 'primary')
             guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
+        // if this is LoadOnDemandModuleMagicComponent it's mean that this is load on demand module and we
+        // need to take the path form routeConfig.path
         let calcRouterPath = currentActiveRoute.routeConfig.path;
+        // add the RouterPath only if exist
         if (calcRouterPath.length > 0) {
             let routerPath = calcRouterPath;
             let tokens = StrUtil.tokenize(routerPath, "/:");
@@ -667,6 +814,7 @@ class RouterContainerMagicComponent {
         this.containerTaskService.insertEvent(guiEvent);
     }
     initializeComponent() {
+        // re-init subformMagicService  since it may change after executing "RouterNavigate" event.
         let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
         if (subformMagicService.currentRouteDefinition !== null) {
             let comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
@@ -678,6 +826,9 @@ class RouterContainerMagicComponent {
             this.parentMgSubformService = subformMagicService;
             subformMagicService.currentRouteDefinition = null;
             SubformMagicService.currentCallerMgSubformServiceRef = null;
+            //When the component is initialized, then also we get the notification for paramMap subscription.
+            //But in this case,  we do not have to raise the event, because magic engine itself has  initiated the route with the same parameters.
+            //So, control it via ignoreParamChange flag.
             let ignoreParamChange = true;
             myActiveRoute.paramMap.subscribe(params => {
                 if (!ignoreParamChange)
@@ -688,7 +839,12 @@ class RouterContainerMagicComponent {
             this.routerCommandsMagicService.ExecuteNextCommand();
         }
     }
+    /**
+     * Cleanup
+     */
     ngOnDestroy() {
+        // TODO Routing: Call close() only if the task is not already closed.
+        // Task can be closed when a router is overlayed by another task via call operation.
         if (this.componentRef != null) {
             this.componentRef.instance.task.close();
             let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
@@ -696,25 +852,30 @@ class RouterContainerMagicComponent {
             RouterContainerMagicComponent.lastRoute = this.router.url;
         }
     }
-    static ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ static ɵfac = function RouterContainerMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], standalone: false, decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RouterContainerMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-route-outlet',
                 template: `
-  `
+  `,
+                standalone: false
             }]
     }], () => [{ type: i2.ActivatedRoute }, { type: i2.Router }, { type: EngineMagicService }, { type: TaskMagicService }, { type: i0.ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src\\ui\\router-container.magic.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src/ui/router-container.magic.component.ts", lineNumber: 23 }); })();
 
+/**
+ * @ignore
+ */
 class GuiInteractiveExecutor {
     command;
     component;
     task;
     overlayService;
     Run() {
+        // Sets the currentContextID
         try {
             switch (this.command._commandType) {
                 case InteractiveCommandType.GET_VALUE:
@@ -751,6 +912,7 @@ class GuiInteractiveExecutor {
         }
         catch (ex) {
             throw ex;
+            //want to see all the exceptions for now
         }
     }
     static executeInteractiveCommand(task, guiIntactiveCommand, overlayService) {
@@ -769,6 +931,7 @@ class GuiInteractiveExecutor {
         }
         else if (this.task.isTableControl(this.command.controlName))
             val = this.task.getValue(this.command.controlName, guiRowId.toString());
+        // If this is Three State Checkbox, then check if value is indeterminate.
         if (this.command._boolVal) {
             const indeterminate = this.task.getProperty(this.command.controlName, HtmlProperties.CheckBoxIndeterminate, guiRowId.toString());
             if (indeterminate)
@@ -839,20 +1002,25 @@ BaseMagicOverlayContainer = __decorate([
     Output()
 ], BaseMagicOverlayContainer);
 
+/**
+ * Directive for setting  ViewContainerRef on element
+ */
 class MagicViewContainerRef {
     vcRef;
     constructor(vcRef) {
         this.vcRef = vcRef;
+        // For angular 10 -  find the component from the views
         let comp = (this.vcRef._hostLView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
         comp.setViewContainerRef(vcRef);
     }
-    static ɵfac = function MagicViewContainerRef_Factory(t) { return new (t || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]] });
+    /** @nocollapse */ static ɵfac = function MagicViewContainerRef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicViewContainerRef, [{
         type: Directive,
         args: [{
                 selector: '[magicViewContainerRef]',
+                standalone: false
             }]
     }], () => [{ type: i0.ViewContainerRef }], null); })();
 
@@ -860,42 +1028,103 @@ const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵelementStart(0, "button", 16);
     i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_div_5_Template(rf, ctx) { if (rf & 1) {
+function MagicOverlayContainer_span_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10, 2);
+    i0.ɵɵelementStart(0, "span", 17, 2);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_span_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 18, 3);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_span_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 19, 4);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20, 5);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "button", 11);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵelementStart(3, "button", 21);
+    i0.ɵɵlistener("click", function MagicOverlayContainer_div_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("movable", ctx_r2.IsMovable());
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
 } }
+/**
+ * Creates a modal window for Magic modal window components
+ */
 class MagicOverlayContainer extends BaseMagicOverlayContainer {
+    /**
+     * HTML to be displayed in the modal window
+     */
     modalbodyViewContainerRef;
+    /**
+     * Header of the modal window
+     */
     headerElementRef;
+    /**
+     * Foreground of the modal window
+     */
     foregroundElementRef;
+    /**
+     *
+     */
     ModalComp = null;
+    /**
+     *
+     */
     ModalCompParameters = {};
     onClose = new EventEmitter();
+    /**
+     *
+     */
     componentRef = null;
+    resizing = false;
+    resizeDirection = null;
+    originalWidth = 0;
+    originalHeight = 0;
+    originalMouseX = 0;
+    originalMouseY = 0;
+    isCenteredToWindow = true;
+    static minAllowedWidth = 30;
+    static minAllowedHeight = 30;
+    /**
+     *
+     */
     constructor() {
         super();
     }
+    /**
+     *
+     */
     ngOnInit() {
         this.componentRef = this.modalbodyViewContainerRef.createComponent(this.ModalComp);
         Object.assign(this.componentRef.instance, this.ModalCompParameters);
+        let comp = this.componentRef.instance;
+        this.isCenteredToWindow = comp.IsCenteredToWindow();
     }
     setViewContainerRef(vcRef) {
         this.modalbodyViewContainerRef = vcRef;
     }
+    /**
+     * Returns the form name
+     * @returns
+     */
     getText() {
         if (this.componentRef !== null) {
             let comp = this.componentRef.instance;
@@ -904,13 +1133,17 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         else
             return '';
     }
+    /**
+     * Returns CSS styles for the window
+     * @returns
+     */
     getStyle() {
         let styles = {};
         if (this.componentRef != undefined) {
             let comp = this.componentRef.instance;
             styles['width'] = comp.Width();
             styles['height'] = comp.Height();
-            if (comp.IsCenteredToWindow()) {
+            if (this.isCenteredToWindow) {
                 styles['margin'] = 'auto';
             }
             else {
@@ -920,6 +1153,10 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         }
         return styles;
     }
+    /**
+     * Returns the CSS styles for the client area
+     * @returns
+     */
     getClientAreaStyles() {
         let styles = {};
         if (this.componentRef != undefined) {
@@ -934,69 +1171,182 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         }
         return styles;
     }
+    /**
+     * Should the title bar be displayed
+     * @returns
+     */
     getShowTitleBar() {
         if (this.componentRef != undefined) {
             let comp = this.componentRef.instance;
             return comp.ShowTitleBar();
         }
     }
+    /**
+     *
+     */
     OnClose() {
         this.onClose.emit();
     }
+    /**
+     * Handles click in the background window
+     */
     OnBackgroundClick() {
         let comp = this.componentRef.instance;
         if (comp.ShouldCloseOnBackgroundClick())
             this.OnClose();
     }
-    static ɵfac = function MagicOverlayContainer_Factory(t) { return new (t || MagicOverlayContainer)(); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
+    /**
+     * Checks if the overlay component allows to be resized.
+     * @returns {boolean} True if the overlay is resizable, false otherwise.
+     */
+    IsResizable() {
+        let comp = this.componentRef.instance;
+        return comp.IsResizable();
+    }
+    /**
+     * Checks if the overlay component allows to be moved (dragged).
+     * @returns {boolean} True if the overlay is movable, false otherwise.
+     */
+    IsMovable() {
+        let comp = this.componentRef.instance;
+        return comp.IsMovable();
+    }
+    /**
+     * Initiates the resize process when a mousedown event occurs on a resize handle.
+     * Stores the initial state (dimensions, mouse position) and sets flags.
+     * @param {MouseEvent} event - The mousedown event triggering the resize.
+     * @param {'right' | 'bottom' | 'corner'} direction - Indicates which resize handle was activated.
+     */
+    onResizeStart(event, direction) {
+        this.resizing = true;
+        this.resizeDirection = direction;
+        const element = this.foregroundElementRef.nativeElement;
+        this.originalWidth = element.offsetWidth;
+        this.originalHeight = element.offsetHeight;
+        this.originalMouseX = event.clientX;
+        this.originalMouseY = event.clientY;
+        // Removes auto margin and set left and top style
+        if (this.isCenteredToWindow) {
+            element.style.left = element.offsetLeft + 'px';
+            element.style.top = element.offsetTop + 'px';
+            element.style.margin = '';
+            this.isCenteredToWindow = false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Handles the resizing logic as the mouse moves across the window.
+     * This listener is active globally on the window during a resize operation via @HostListener.
+     * Calculates and applies the new dimensions to the element based on mouse movement.
+     * @param {MouseEvent} event - The mousemove event passed by the HostListener.
+     */
+    onResize(event) {
+        if (!this.resizing)
+            return;
+        const element = this.foregroundElementRef.nativeElement;
+        const parentElement = element.parentNode;
+        const parentWidth = parentElement.offsetWidth;
+        const parentHeight = parentElement.offsetHeight;
+        const rect = element.getBoundingClientRect();
+        const left = rect.left;
+        const top = rect.top;
+        // When the user extends the overlay window to its edge, it becomes hard to grab the border for resizing.
+        // To improve this, 2px are subtracted from maxAllowedWidth and maxAllowedHeight, making it easier to grab the overlay's border for resizing.
+        const maxAllowedWidth = parentWidth - left - 2;
+        const maxAllowedHeight = parentHeight - top - 2;
+        let dx = (event.clientX - this.originalMouseX);
+        let dy = (event.clientY - this.originalMouseY);
+        if (this.resizeDirection === 'right' || this.resizeDirection === 'corner') {
+            let newWidth = this.originalWidth + dx;
+            if (newWidth > maxAllowedWidth)
+                newWidth = maxAllowedWidth;
+            else if (newWidth < MagicOverlayContainer.minAllowedWidth)
+                newWidth = MagicOverlayContainer.minAllowedWidth;
+            element.style.width = `${newWidth}px`;
+        }
+        if (this.resizeDirection === 'bottom' || this.resizeDirection === 'corner') {
+            let newHeight = this.originalHeight + dy;
+            if (newHeight > maxAllowedHeight)
+                newHeight = maxAllowedHeight;
+            else if (newHeight < MagicOverlayContainer.minAllowedHeight)
+                newHeight = MagicOverlayContainer.minAllowedHeight;
+            element.style.height = `${newHeight}px`;
+        }
+    }
+    /**
+     * Finalizes the resize operation when the mouse button is released anywhere on the window.
+     * Resets the resizing state flags. Triggered globally via @HostListener.
+     */
+    onResizeEnd() {
+        this.resizing = false;
+        this.resizeDirection = null;
+    }
+    /** @nocollapse */ static ɵfac = function MagicOverlayContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainer)(); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$3, 5);
             i0.ɵɵviewQuery(_c1$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
-        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 4, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], [1, "modal-foreground", 3, "ngStyle"], ["class", "modal-header", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 8, consts: [["modalForeground", ""], ["modalbody", ""], ["dragHandleCorner", ""], ["dragHandleRight", ""], ["dragHandleBottom", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div")(1, "div", 3);
+            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
             i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBackgroundClick()); });
-            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 4);
+            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 5, 0);
-            i0.ɵɵtemplate(5, MagicOverlayContainer_div_5_Template, 5, 1, "div", 6);
-            i0.ɵɵelementStart(6, "div", 7);
-            i0.ɵɵelement(7, "div", 8, 1);
+            i0.ɵɵelementStart(3, "div", 9, 0);
+            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 2, 0, "span", 10)(6, MagicOverlayContainer_span_6_Template, 2, 0, "span", 11)(7, MagicOverlayContainer_span_7_Template, 2, 0, "span", 12)(8, MagicOverlayContainer_div_8_Template, 5, 3, "div", 13);
+            i0.ɵɵelementStart(9, "div", 14);
+            i0.ɵɵelement(10, "div", 15, 1);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !ctx.getShowTitleBar());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", ctx.getStyle());
+            i0.ɵɵproperty("ngStyle", ctx.getStyle())("cdkDragDisabled", !ctx.IsMovable());
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, dependencies: [i1.NgIf, i1.NgStyle, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}"] });
+        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
         args: [{ selector: 'app-magic-overlay-container', template: `
-    <div>
+    <div class="boundary-line">
+
       <div class="modal-background" (click)="OnBackgroundClick()">
         <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white" *ngIf="!getShowTitleBar()">X</button>
       </div>
-      <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()">
-        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()">
+
+      <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()" cdkDragBoundary=".boundary-line" cdkDrag [cdkDragDisabled]="!IsMovable()">
+
+        <span #dragHandleCorner *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
+        <span #dragHandleRight *ngIf="IsResizable()" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
+        <span #dragHandleBottom *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+
+        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()" cdkDragHandle [class.movable]="IsMovable()">
           {{getText()}}
           <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
         </div>
+
         <div [ngStyle]="getClientAreaStyles()">
           <div #modalbody magicViewContainerRef>
           </div>
         </div>
       </div>
     </div>
-  `, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}\n"] }]
+  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
     }], () => [], { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
@@ -1009,33 +1359,61 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: Input
         }], onClose: [{
             type: Output
+        }], onResize: [{
+            type: HostListener,
+            args: ['window:mousemove', ['$event']]
+        }], onResizeEnd: [{
+            type: HostListener,
+            args: ['window:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src\\ui\\magic-modal\\magic-overlay-container.ts", lineNumber: 40 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 50 }); })();
 
+/**
+ * Service managing overlay windows
+ * This is Magic's default provider
+ */
 class OverlayContainerMagicProvider {
     getComponent() {
         return MagicOverlayContainer;
     }
-    static ɵfac = function OverlayContainerMagicProvider_Factory(t) { return new (t || OverlayContainerMagicProvider)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
+    /** @nocollapse */ static ɵfac = function OverlayContainerMagicProvider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayContainerMagicProvider)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OverlayContainerMagicProvider, factory: OverlayContainerMagicProvider.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayContainerMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
+/**
+ * This is a base class for the magic confirm components
+ */
 class BaseMagicConfirmComponent {
+    /**
+     * title of the component
+     */
     title;
+    /**
+     * message of the component
+     */
     message;
+    /**
+     * onClose Event - to be raised when the component is closed
+     * should pass true when OK is pressed and false when cancel is pressed
+     */
     onClose = new EventEmitter();
+    /**
+     * raises close Event
+     * @param result true when OK is pressed and false when cancel is pressed
+     *
+     */
     OnClose(result) {
         this.onClose.emit(result);
     }
-    static ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { } });
+    /** @nocollapse */ static ɵfac = function BaseMagicConfirmComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMagicConfirmComponent)(); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
-        args: [{ selector: 'mg-base-confirm', template: '' }]
+        args: [{ selector: 'mg-base-confirm', template: '', standalone: false }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1043,21 +1421,37 @@ class BaseMagicConfirmComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src\\ui\\components\\base-magic-confirm.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 13 }); })();
 
+/**
+ * This is a base class for the magic alert components
+ */
 class BaseMagicAlertComponent {
+    /**
+     * title of the component
+     */
     title;
+    /**
+     * message of the component
+     */
     message;
+    /**
+     * onClose Event - to be raised when the component is closed
+  
+     */
     onClose = new EventEmitter();
+    /**
+     * close magic alert
+     */
     OnClose() {
         this.onClose.emit();
     }
-    static ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-    static ɵ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) { } });
+    /** @nocollapse */ static ɵfac = function BaseMagicAlertComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMagicAlertComponent)(); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
-        args: [{ selector: 'mg-base-alert', template: '' }]
+        args: [{ selector: 'mg-base-alert', template: '', standalone: false }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1065,8 +1459,11 @@ class BaseMagicAlertComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src\\ui\\components\\base-magic-alert.component.ts", lineNumber: 13 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src/ui/components/base-magic-alert.component.ts", lineNumber: 14 }); })();
 
+/**
+ * Directive for setting focus on element
+ */
 class MagicFocusDirective {
     hostElement;
     constructor(hostElement) {
@@ -1075,13 +1472,14 @@ class MagicFocusDirective {
     ngAfterViewInit() {
         this.hostElement.nativeElement.focus();
     }
-    static ɵfac = function MagicFocusDirective_Factory(t) { return new (t || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]] });
+    /** @nocollapse */ static ɵfac = function MagicFocusDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicFocusDirective, [{
         type: Directive,
         args: [{
-                selector: '[magicFocus]'
+                selector: '[magicFocus]',
+                standalone: false
             }]
     }], () => [{ type: i0.ElementRef }], null); })();
 
@@ -1092,17 +1490,34 @@ class MagicOverlayContainerWrapper {
     injector;
     changeDetectorRef;
     compiler;
+    /**
+     *
+     */
     Component = null;
+    /**
+     *
+     */
     Parameters = {};
     OverlayTypeParam;
     onClose = new EventEmitter();
+    /**
+     * HTML to be displayed in the modal window
+     */
     overlayContentViewContainerRef;
     overlayContainerWrapperElementRef;
+    /**
+     * @ignore
+     * contais data of allowed base components to use
+     */
     static allowedBaseComps = new Map([
         [OverlayType.Overlay, { comp: BaseMagicOverlayContainer, error: 'BaseMagicOverlayContainer . Overlay ' }],
         [OverlayType.Alert, { comp: BaseMagicAlertComponent, error: 'BaseMagicAlertComponent. Alert ' }],
         [OverlayType.ConfirmationBox, { comp: BaseMagicConfirmComponent, error: 'BaseMagicConfirmComponent. Confirmation ' }]
     ]);
+    /**
+     *
+     * @param componentFactoryResolver
+     */
     constructor(componentListMagicService, magicLazyModuleLoader, injector, changeDetectorRef, compiler) {
         this.componentListMagicService = componentListMagicService;
         this.magicLazyModuleLoader = magicLazyModuleLoader;
@@ -1110,6 +1525,9 @@ class MagicOverlayContainerWrapper {
         this.changeDetectorRef = changeDetectorRef;
         this.compiler = compiler;
     }
+    /**
+     *
+     */
     ngOnInit() {
         let moduleRef = this.componentListMagicService.getModuleRef(this.Parameters.MagicFormName);
         if (moduleRef == null) {
@@ -1117,6 +1535,7 @@ class MagicOverlayContainerWrapper {
             if (lazyLoadModule != null) {
                 const Magic = 'Magic';
                 const Module = 'Module';
+                // extract name of module(XX) from 'MagicXXModule'
                 const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                 this.magicLazyModuleLoader.Load(moduleName).then(m => {
                     const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
@@ -1155,13 +1574,13 @@ class MagicOverlayContainerWrapper {
     DetectChanges() {
         this.changeDetectorRef.detectChanges();
     }
-    static ɵfac = function MagicOverlayContainerWrapper_Factory(t) { return new (t || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Compiler)); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MagicOverlayContainerWrapper_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Compiler)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$2, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayContainerWrapperElementRef = _t.first);
-        } }, inputs: { Component: "Component", Parameters: "Parameters", OverlayTypeParam: "OverlayTypeParam" }, outputs: { onClose: "onClose" }, decls: 7, vars: 0, consts: [["overlayContainerWrapper", ""], ["overlayContent", ""], ["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["magicViewContainerRef", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Component: "Component", Parameters: "Parameters", OverlayTypeParam: "OverlayTypeParam" }, outputs: { onClose: "onClose" }, standalone: false, decls: 7, vars: 0, consts: [["overlayContainerWrapper", ""], ["overlayContent", ""], ["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["magicViewContainerRef", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵelement(1, "div", 2);
             i0.ɵɵelementStart(2, "div", 3, 0);
@@ -1182,7 +1601,7 @@ class MagicOverlayContainerWrapper {
       </div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" ></div>
     </div>
-  `, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
+  `, standalone: false, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
     }], () => [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.Compiler }], { Component: [{
             type: Input
         }], Parameters: [{
@@ -1195,11 +1614,14 @@ class MagicOverlayContainerWrapper {
             type: ViewChild,
             args: ['overlayContainerWrapper', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src\\ui\\magic-modal\\magic-overlay-container-wrapper.ts", lineNumber: 45 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 46 }); })();
 
+/***
+ * This is sample component for the alert message
+ */
 class MagicAlertComponent extends BaseMagicAlertComponent {
-    static ɵfac = (() => { let ɵMagicAlertComponent_BaseFactory; return function MagicAlertComponent_Factory(t) { return (ɵMagicAlertComponent_BaseFactory || (ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent)))(t || MagicAlertComponent); }; })();
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicAlertComponent_BaseFactory; return function MagicAlertComponent_Factory(__ngFactoryType__) { return (ɵMagicAlertComponent_BaseFactory || (ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent)))(__ngFactoryType__ || MagicAlertComponent); }; })();
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], standalone: false, 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")(1, "div", 0)(2, "h2");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
@@ -1226,13 +1648,16 @@ class MagicAlertComponent extends BaseMagicAlertComponent {
 
       <button (click)="OnClose()">OK</button>
     </div>
-  </div>`, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
+  </div>`, standalone: false, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicAlertComponent, { className: "MagicAlertComponent", filePath: "src\\ui\\components\\magic-alert.component.ts", lineNumber: 48 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicAlertComponent, { className: "MagicAlertComponent", filePath: "src/ui/components/magic-alert.component.ts", lineNumber: 49 }); })();
 
+/***
+ * This is sample component for the confirmation box
+ */
 class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
-    static ɵfac = (() => { let ɵMagicConfirmationBoxComponent_BaseFactory; return function MagicConfirmationBoxComponent_Factory(t) { return (ɵMagicConfirmationBoxComponent_BaseFactory || (ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent)))(t || MagicConfirmationBoxComponent); }; })();
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicConfirmationBoxComponent_BaseFactory; return function MagicConfirmationBoxComponent_Factory(__ngFactoryType__) { return (ɵMagicConfirmationBoxComponent_BaseFactory || (ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent)))(__ngFactoryType__ || MagicConfirmationBoxComponent); }; })();
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], standalone: false, 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")(1, "div", 0)(2, "h2");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
@@ -1265,29 +1690,56 @@ class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
       <button (click)="OnClose(true)">OK</button>
       <button class="cancel" (click)="OnClose(false)">Cancel</button>
     </div>
-  </div>`, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
+  </div>`, standalone: false, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicConfirmationBoxComponent, { className: "MagicConfirmationBoxComponent", filePath: "src\\ui\\components\\magic-confirmation-box.component.ts", lineNumber: 54 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicConfirmationBoxComponent, { className: "MagicConfirmationBoxComponent", filePath: "src/ui/components/magic-confirmation-box.component.ts", lineNumber: 55 }); })();
 
+/**
+ * Service managing overlay windows
+ * This is Magic's default provider
+ */
+/**
+ * Service managing alert and confirmation windows
+ * This is Magic's default provider
+ */
 class ConfirmationComponentsMagicProvider {
+    /**
+     * Return true when use default javascript alert and confirmation or return false to provide custom components
+     *  @returns true is we want to use default javascript alert and confirmation
+     */
     showDefaultConfirmations() {
         return true;
     }
+    /**
+     * Returns component that will replace javascript alert. The component will be used only if showDefaultConfirmations = false
+     *  @returns component that will replace javascript Alert
+     */
     getAlertComponent() {
         return MagicAlertComponent;
     }
+    /**
+     * Returns component that will replace javascript confirmation box. The component will be used only if showDefaultConfirmations = false
+     *  @returns component that will replace javascript confirmation box
+     */
     getConfirmtionComponent() {
         return MagicConfirmationBoxComponent;
     }
-    static ɵfac = function ConfirmationComponentsMagicProvider_Factory(t) { return new (t || ConfirmationComponentsMagicProvider)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
+    /** @nocollapse */ static ɵfac = function ConfirmationComponentsMagicProvider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfirmationComponentsMagicProvider)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ConfirmationComponentsMagicProvider, factory: ConfirmationComponentsMagicProvider.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationComponentsMagicProvider, [{
         type: Injectable
     }], null, null); })();
 
+/**
+ * Displays a message-box
+ */
 class confirmationBox {
+    /**
+     * @ignore
+     */
     static isConfirmBox(style) {
+        // button format mask is in first nibble from right
         let buttonMode = style & 0x0F;
         var isConfirm = (buttonMode === Styles.MSGBOX_BUTTON_OK_CANCEL) ||
             (buttonMode === Styles.MSGBOX_BUTTON_ABORT_RETRY_IGNORE) ||
@@ -1296,7 +1748,14 @@ class confirmationBox {
             (buttonMode === Styles.MSGBOX_BUTTON_RETRY_CANCEL);
         return (isConfirm);
     }
+    /**
+     * Converts the result from the HTML window to the expected result type
+     * @param style Result received from HTML window
+     * @param okWasPressed Was the "OK" pressed
+     * @returns  MessageBox result type
+     */
     static convertToExcpectedResultBox(style, okWasPressed) {
+        // button format mask is in first nibble from right
         let buttonMode = style & 0x0F;
         let retValue = Styles.MSGBOX_RESULT_OK;
         if (buttonMode === Styles.MSGBOX_BUTTON_OK)
@@ -1313,9 +1772,18 @@ class confirmationBox {
             retValue = okWasPressed ? Styles.MSGBOX_RESULT_RETRY : Styles.MSGBOX_RESULT_CANCEL;
         return retValue;
     }
+    /**
+     * Show a message box as an HTML window
+     * @param title Title of the message box
+     * @param message Message that will be display in the message box
+     * @param style Style that include buttons \ Icons
+     * @returns MessageBox result
+     */
     static showConfirmationBox(title, message, style) {
         let okWasPressed = false;
+        // check if it is confirmation box
         let isConfirm = this.isConfirmBox(style);
+        // the title will be added to the string and we will add new line after the title
         let titleAndString = title + '\n' + '\n' + message;
         if (isConfirm)
             okWasPressed = confirm(titleAndString);
@@ -1323,10 +1791,14 @@ class confirmationBox {
             alert(titleAndString);
             okWasPressed = true;
         }
+        // return the result from the user
         return okWasPressed;
     }
 }
 
+/**
+ * Service managing overlay windows
+ */
 class OverlayWindowService {
     componentList;
     engineMagicService;
@@ -1344,6 +1816,7 @@ class OverlayWindowService {
         this.overlayContainerMagicProvider = overlayContainerMagicProvider;
         this.confirmationComponentsMagicProvider = confirmationComponentsMagicProvider;
     }
+    // The view reference of container of overlay window
     overlayWindowsContainerViewRef;
     overlayWindowFocusManager = null;
     changeDetectorRef = null;
@@ -1359,6 +1832,7 @@ class OverlayWindowService {
             if (lazyLoadModule != null) {
                 const Magic = 'Magic';
                 const Module = 'Module';
+                // extract name of module(XX) from 'MagicXXModule'
                 const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                 this.magicLazyModuleLoader.Load(moduleName).then(m => {
                     const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
@@ -1374,6 +1848,7 @@ class OverlayWindowService {
         }
     }
     open(formName, taskId, taskDescription) {
+        // for overlay which are lazy loaded don't find data in component-list
         let comp = this.componentList.lazyLoadModulesMap != null && this.componentList.lazyLoadModulesMap.hasOwnProperty(formName) ? null : this.componentList.getComponent(formName);
         let parameters = { taskIdParam: taskId, taskDescription: taskDescription };
         let componentRef = this.createModalComponent({ MagicFormName: formName, ModalComp: comp, ModalCompParameters: parameters }, this.overlayContainerMagicProvider.getComponent(), OverlayType.Overlay);
@@ -1382,21 +1857,31 @@ class OverlayWindowService {
             guiEvent.TaskID = taskId;
             this.engineMagicService.insertEvent(guiEvent);
         });
+        //using the same changeDetectorRef from root-component
         this.changeDetectorRef.detectChanges();
     }
     close(commandStr) {
+        // Close the overlay by removing the overlay window from its container
         this.overlayWindowsContainerViewRef.remove();
         this.overlayWindowFocusManager.popDialog();
         let guiEvent1 = getGuiEventObj("dispose", null, 0);
         guiEvent1.TaskID = commandStr;
         this.engineMagicService.insertEvent(guiEvent1);
     }
+    /**
+     * Open Confirmation box
+     * @param title title of the box
+     * @param msg message
+     * @param style Magic style
+     */
     openConfirmationBox(title, msg, style) {
+        //show default confirmations
         if (this.confirmationComponentsMagicProvider.showDefaultConfirmations()) {
             let res = confirmationBox.showConfirmationBox(title, msg, style);
             this.finishConfirmation(style, res);
         }
         else {
+            //show custom confirmations
             let comp = confirmationBox.isConfirmBox(style) ? this.confirmationComponentsMagicProvider.getConfirmtionComponent() : this.confirmationComponentsMagicProvider.getAlertComponent();
             let overlayType = confirmationBox.isConfirmBox(style) ? OverlayType.ConfirmationBox : OverlayType.Alert;
             let componentRef = this.createModalComponent({ title: title, message: msg }, comp, overlayType);
@@ -1407,11 +1892,21 @@ class OverlayWindowService {
             });
         }
     }
+    /**
+     * This method is called on close of the confirmation
+     * @param style Magic style
+     * @param result
+     */
     finishConfirmation(style, result) {
         let guiEvent = getGuiEventObj("confirmationClosed", null, 0);
         guiEvent.keyCode = confirmationBox.convertToExcpectedResultBox(style, result);
         this.engineMagicService.insertEvent(guiEvent);
     }
+    /**
+     * creates a modal component. Can be used for overlay, message box or confirmation box
+     * @param parameters component's parameters
+     * @param component components to create
+     */
     createModalComponent(parameters, component, overlayType) {
         let componentRef;
         let magicModalContainerParameters = {
@@ -1419,15 +1914,17 @@ class OverlayWindowService {
             Parameters: parameters,
             OverlayTypeParam: overlayType
         };
+        // Create the UI component of modal window
         let viewCRef = this.overlayWindowsContainerViewRef;
         componentRef = viewCRef.createComponent(MagicOverlayContainerWrapper);
+        // Set the data to newly created component
         Object.assign(componentRef.instance, magicModalContainerParameters);
         this.overlayWindowFocusManager.pushDialog(componentRef.instance.GetRootElement());
         componentRef.instance.DetectChanges();
         return componentRef;
     }
-    static ɵfac = function OverlayWindowService_Factory(t) { return new (t || OverlayWindowService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function OverlayWindowService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayWindowService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayWindowService, [{
         type: Injectable,
@@ -1555,50 +2052,135 @@ class DialogInfo {
     }
 }
 
+/**
+ * Main service to connect the UI with the Magic WebCLient
+ */
 class TaskMagicService {
     magic;
     overlayWindowService;
+    /**
+     * Service to provide table-related functionalities
+     */
     tableService;
+    /**
+     * Collection of data for all controls
+     */
     Records = new Records();
+    /**
+     * FormGroup collection for line mode
+     */
     formGroups = [];
+    /**
+     * FormGroup for all controls in screen mode
+     */
     ScreenModeControls;
+    /**
+     * @ignore
+     */
     refreshDom = new Subject();
+    /**
+     * @ignore
+     */
     subscribeRefreshDom;
+    /**
+     * @ignore
+     */
     detectChanges = new Subject();
+    /**
+     * @ignore
+     */
     subscribeInteractiveCommands;
+    /**
+     * @ignore
+     */
     interactiveCommands = new Subject();
+    /**
+     * @ignore
+     * This event is emitted when the selected row in a table changes.
+     */
     OnSelectedRowChanged = new EventEmitter();
+    /**
+     * @ignore
+     */
     customPropertiesSubject = new Subject();
+    /**
+     * @ignore
+     */
     recordsCountChangeSubject = new Subject();
     mgLoadSubject = new Subject();
+    /**
+     * @ignore
+     */
     template;
+    /**
+     * Service to provide subform-related functionalities
+     */
     mgSubformService;
+    /**
+     * Service to provide the title-change functionality
+     */
     mgTitleService;
+    /**
+     * Service which enables getting/setting values from/to the Magic WebClient engine
+     */
     mgAccessorService;
     mgInputDateFormat;
+    /**
+     * @ignore
+     */
     oldPageSize = 0;
+    /**
+     *
+     * @param  magic
+     */
     constructor(magic, overlayWindowService) {
         this.magic = magic;
         this.overlayWindowService = overlayWindowService;
         this.Records.setGuiTopIndex(0);
         this.mgInputDateFormat = null;
     }
+    /**
+    * returns true if used is logged in
+    * @returns
+    */
     getIsLoggenIn() {
         return this.magic.getIsLoggedIn();
     }
+    /**
+     * Id of task to which this service refers
+     */
     _taskId;
+    /**
+     * returns the task Id
+     * @returns
+     */
     get taskId() {
         return this._taskId;
     }
+    /**
+     * Sets the task Id
+     * @param value the task id to set
+     */
     set taskId(value) {
+        // debugger;
         this._taskId = value;
     }
+    /**
+     * Returns the task's data in Screen mode
+     * @returns
+     */
     get ScreenControlsData() {
         return this.Records.list['0'];
     }
+    /**
+     * @ignore
+     */
     settemplate(value) {
         this.template = value;
     }
+    /**
+     * Builds the FormControl for each and every control
+     */
     buildScreenModeControls() {
         const group = new FormGroup({});
         for (const key in this.template) {
@@ -1610,10 +2192,21 @@ class TaskMagicService {
         }
         this.ScreenModeControls = group;
     }
+    /**
+     * Is the control a table control
+     * @param id Id of the control
+     * @returns
+     */
     isTableControl(id) {
         return this.template[id] == '1';
     }
     getMgInputDateFormat() { return this.mgInputDateFormat; }
+    /**
+     * Returns the FormControl of a control
+     * @param guiRowid Id of the requested row
+     * @param id Id of the control
+     * @returns
+     */
     getFormControl(guiRowid, id) {
         let c;
         let group = this.isTableControl(id) ? this.formGroups[guiRowid] : this.ScreenModeControls;
@@ -1623,12 +2216,21 @@ class TaskMagicService {
         }
         return c;
     }
+    /**
+     * handle the change of text for input control inside table
+     * @param  guiRowId Id of the row for which the FormControls are built
+     * set the new value of the formcontrol
+     */
     setInputTextValue(controlId, guiRowid, val) {
         this.setValue(controlId, guiRowid, this.ConvertValToNative(controlId, 0, val));
         const fc = this.getFormControl(guiRowid, controlId);
         if (!isNullOrUndefined(val))
             fc.setValue(val);
     }
+    /**
+     * Build the FormControls for a table row
+     * @param  guiRowId Id of the row for which the FormControls are built
+     */
     buildTableRowControls(guiRowId) {
         const group = new FormGroup({});
         for (const key in this.template) {
@@ -1640,30 +2242,58 @@ class TaskMagicService {
         }
         this.formGroups[guiRowId] = group;
     }
+    /**
+     *
+     * @ignore
+     */
     updateRecordsBeforeCurrentView(value) {
         this.Records.recordsBeforeCurrentView = value;
     }
+    /**
+     * @ignore
+     */
     setIncludesFirst(value) {
         this.Records.includesFirst = value;
     }
+    /**
+     * @ignore
+     */
     setIncludesLast(value) {
         this.Records.includesLast = value;
     }
+    /**
+     * @ignore
+     */
     markRowAsCreated(guiRowId) {
         this.Records.markRowAsCreated(guiRowId);
     }
+    /**
+     * @ignore
+     */
     markRowAsNotCreated(guiRowId) {
         this.Records.markRowAsNotCreated(guiRowId);
     }
+    /**
+     * @ignore
+     */
     startRowEditing(guiRowId) {
         this.Records.startRowEditing(guiRowId);
     }
+    /**
+     * @ignore
+     */
     stopRowEditing(guiRowId) {
         this.Records.stopRowEditing(guiRowId);
     }
+    /**
+     * @ignore
+     */
     isRowInRowEditing(guiRowId) {
         return this.Records.isRowInRowEditing(guiRowId);
     }
+    /**
+     * @ignore
+     */
     setIsEmptyDataView(isEmpty) {
         if (this.Records.isEmptyDataView !== isEmpty) {
             if (isEmpty)
@@ -1673,6 +2303,11 @@ class TaskMagicService {
             this.refreshView();
         }
     }
+    /**
+     * Initialize the service to work with the task
+     * @param taskId Id of the task
+     * @param taskDescription
+     */
     initTask(taskId, taskDescription) {
         this.Records.createFirst();
         this.oldPageSize = 0;
@@ -1684,39 +2319,80 @@ class TaskMagicService {
             this.settemplate(taskDescription);
         }
         this.buildScreenModeControls();
+        // remove previous subscriptions
         if (!isNullOrUndefined(this.subscribeRefreshDom))
             this.subscribeRefreshDom.unsubscribe();
         if (!isNullOrUndefined(this.subscribeInteractiveCommands))
             this.subscribeInteractiveCommands.unsubscribe();
         this.subscribeRefreshDom = this.magic.refreshDom.pipe(filter(command => command.TaskTag === this.taskId))
             .subscribe(command => {
+            // console.log("Task " + command.TaskTag + "command " + command.CommandType);
             this.executeCommand(command);
         });
         this.subscribeInteractiveCommands = this.magic.interactiveCommands
             .pipe(filter(command => command.TaskTag === this.taskId))
             .subscribe(command => {
+            // console.log("Task " + command.TaskTag + "command " + command.CommandType);
             this.executeInteractiveCommand(command);
         });
     }
+    /**
+     * @ignore
+     */
     refreshView() {
         this.detectChanges.next('');
     }
+    /**
+     * Insert an event to the Magic WebClient event queue
+     * @param guiEvent The event to insert
+     */
     insertEvent(guiEvent) {
         guiEvent.TaskID = this.taskId;
         this.magic.insertEvent(guiEvent);
     }
+    /**
+     * @ignore
+     */
     GetControlPictureMask(controlName) {
         return this.magic.GetControlPictureMask(this.taskId, controlName);
     }
+    /**
+     * @ignore
+     */
+    UploadFileToServer(fileContent, serverFileName) {
+        return this.magic.UploadFileToServer(fileContent, serverFileName);
+    }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.magic.DownloadFileFromServer(serverFileName);
+    }
+    /**
+     * Validates the control value, using the Magic WebClient
+     * @param controlName Id of validated control
+     * @param value value to be validated
+     * @returns If validation fails, returns error message, else returns null
+     */
     ValidateControlValue(controlName, value) {
         return this.magic.ValidateControlValue(this.taskId, controlName, value);
     }
+    /**
+     * @ignore
+     */
     GetRangedValue(controlName, value) {
         return this.magic.GetRangedValue(this.taskId, controlName, value);
     }
+    /**
+     * @ignore
+     */
     GetFldRanges(controlName) {
         return this.magic.GetFldRanges(this.taskId, controlName);
     }
+    /**
+     * returns the value of a property of the control
+     * @param controlId Id of control
+     * @param prop Property
+     * @param guiRowId Row Id, if applicable
+     * @returns Property value
+     */
     getProperty(controlId, prop, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
@@ -1730,6 +2406,9 @@ class TaskMagicService {
                 return this.Records.list[guiRowId].getProperty(controlId, prop);
         }
     }
+    /**
+     * @ignore
+     */
     getPropertyStub(ControlsProperties, controlId, prop) {
         ControlsProperties = ControlsProperties.ControlsProperties;
         if (controlId in ControlsProperties) {
@@ -1739,15 +2418,31 @@ class TaskMagicService {
         }
         return '';
     }
+    /**
+     * @ignore
+     */
     getStyleStub(ControlsProperties, controlId, styleName) {
         ControlsProperties = ControlsProperties.ControlsProperties;
         return ControlsProperties[controlId].stylesMap.get(styleName);
     }
+    /**
+     * Return the CSS classes used for this control
+     * @param controlId Id of control
+     * @param guiRowId Row Id, if applicable
+     * @returns String containing the classes currently defined for this control
+     */
     getClasses(controlId, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
         return this.Records.list[guiRowId].getControlMetadata(controlId).classes;
     }
+    /**
+     * Return the value of a style used for a control
+     * @param controlId Id of control
+     * @param styleName Name of style
+     * @param guiRowId Row Id, if applicable
+     * @returns value of style of the control
+     */
     getStyle(controlId, styleName, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
@@ -1758,21 +2453,45 @@ class TaskMagicService {
             return StylesMapManager.magicValueGetStyle(styleName, magicValue);
         }
     }
+    /**
+     * Return the value of a control
+     * @param controlId Id of control
+     * @param guiRowId Row Id, if applicable
+     * @returns value of the control
+     */
     getValue(controlId, guiRowId) {
         if (isNullOrUndefined(guiRowId))
             guiRowId = '0';
         return this.Records.list.length > +guiRowId ? this.Records.list[guiRowId].values[controlId] : '';
     }
+    /**
+     * Return the formatted value of a control
+     * @param controlId Id of control
+     * @param guiRowId Row Id, if applicable
+     * @returns value of the control
+     */
     getFormattedValue(controlName, val, rowId) {
         return this.magic.GetFormattedValue(this.taskId, controlName, val, rowId);
     }
+    /**
+     * Sets the value of a control
+     * @param controlId Id of control
+     * @param guiRowId Row Id, if applicable
+     * @param value Value to set
+     */
     setValue(controlId, guiRowId, value) {
         return this.Records.list[guiRowId].setValue(controlId, value);
     }
+    /**
+     * @ignore
+     */
     executeInteractiveCommand(guiInteractiveCommand) {
         GuiInteractiveExecutor.executeInteractiveCommand(this, guiInteractiveCommand, this.overlayWindowService);
         this.interactiveCommands.next(guiInteractiveCommand);
     }
+    /**
+     * @ignore
+     */
     handleSetProperty(command, isTableChild) {
         let controlId = command.CtrlName;
         let dvRowId = (command.line || 0);
@@ -1809,6 +2528,7 @@ class TaskMagicService {
         let controlId = command.CtrlName;
         let properties;
         let isTableChild = this.isTableControl(controlId);
+        // For non-input type controls on table.
         if (command.obj !== null)
             isTableChild = isTableChild || command.obj.IsTableChild;
         guiRowId = this.getGuiRowId(dvRowId, isTableChild);
@@ -1871,8 +2591,10 @@ class TaskMagicService {
                 break;
             case CommandType.PROP_SET_USER_PROPERTY:
                 properties = this.Records.list[guiRowId].getControlMetadata(controlId);
+                // if the property has changed, set the property and raise the subject
                 if (properties.userProperties.get(command.Operation) !== command.obj1) {
                     properties.userProperties.set(command.Operation, command.obj1);
+                    // the property name is of format <controlName>~<propertyName>
                     this.customPropertiesSubject.next({ propertyName: controlId + '~' + command.Operation, value: command.obj1, rowId: guiRowId });
                 }
                 break;
@@ -1926,6 +2648,9 @@ class TaskMagicService {
                 break;
         }
     }
+    /**
+    custom validator
+    */
     customValidator(rowid, id) {
         return (control) => {
             let controlMetadata;
@@ -1939,6 +2664,13 @@ class TaskMagicService {
             return null;
         };
     }
+    /**
+     * COnvert a value from Magic format to native format
+     * @param controlId Id of control
+     * @param  rowId Row Id, if applicable
+     * @param val Value to convert
+     * @returns Converted value
+     */
     ConvertValToNative(controlId, rowId, val) {
         let properties;
         properties = this.Records.list[0].getControlMetadata(controlId);
@@ -1990,6 +2722,13 @@ class TaskMagicService {
                 return val;
         }
     }
+    /**
+     * Convert a value from native to Magic format
+     * @param controlId Id of control
+     * @param  rowId Row Id, if applicable
+     * @param val Value to convert
+     * @returns Converted value
+     */
     ConvertValFromNative(controlId, rowId, val) {
         let properties;
         properties = this.Records.list[0].getControlMetadata(controlId);
@@ -2032,12 +2771,22 @@ class TaskMagicService {
                 return val;
         }
     }
+    /**
+     * Handle resize and also fetch chunk of records if having an empty view.
+     * @ignore
+     * @param pageSize : PageSize
+     * @param topGuiRowId : GuiRowId of first record in view.
+     */
     resize(pageSize, topGuiRowId) {
         let guiEvent = getGuiEventObj('resize', 'table', 0);
         guiEvent.PageSize = pageSize;
+        //As 'getRows' event also gets executed, set the guiEvent.Line parameter.
         guiEvent.Line = topGuiRowId;
         this.insertEvent(guiEvent);
     }
+    /**
+     * Fetches data for new table rows when scrolling done
+     */
     onScrollDown() {
         if (!this.Records.includesLast) {
             let guiEvent = getGuiEventObj('getRows', '', 0);
@@ -2045,15 +2794,29 @@ class TaskMagicService {
             this.insertEvent(guiEvent);
         }
     }
+    /**
+     * Sets the new browser window title
+     * @param newTitle New window title
+     */
     setTitle(newTitle) {
         this.mgTitleService.setTitle(newTitle);
     }
+    /**
+     * @ignore
+     */
     getGuiRowId(dvRowId, isTableControl) {
         return (isTableControl ? dvRowId + this.Records.recordsBeforeCurrentView : 0);
     }
+    /**
+     *
+     * @ignore
+     */
     getDvRowId(guiRowId) {
         return (guiRowId - this.Records.recordsBeforeCurrentView);
     }
+    /**
+     * Clean up the service when it is no longer needed
+     */
     dispose() {
         this.refreshDom.complete();
         this.detectChanges.complete();
@@ -2063,6 +2826,14 @@ class TaskMagicService {
         this.customPropertiesSubject.complete();
         this.OnSelectedRowChanged.complete();
     }
+    ///////////////////////////////
+    //Events:
+    /**
+     * Handle the Combobox "change" event
+     * @param event  The event received from the UI
+     * @param idx Id of the control raising the event
+     * @param line Row Id, if applicable
+     */
     onComboboxSelectionChanged(event, idx, line) {
         let guiEvent = getGuiEventObj('selectionchanged', idx, line);
         if (typeof (event) == 'number') {
@@ -2081,6 +2852,11 @@ class TaskMagicService {
         }
         this.insertEvent(guiEvent);
     }
+    /**
+     * Handle the Listbox "change" event
+     * @param  event The event received from the UI
+     * @param idx Id of the control raising the event
+     */
     onListBoxSelectionChanged(event, idx) {
         let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
         let selectedOptions;
@@ -2096,9 +2872,15 @@ class TaskMagicService {
             else
                 indexes[i] = (selectedOptions[i]).value;
         }
-        guiEvent.Value = indexes;
+        guiEvent.Value = indexes; // TODO: fix
         this.insertEvent(guiEvent);
     }
+    /**
+     * Handle the Checkbox "change" event
+     * @param  event The event received from the UI
+     * @param idx Id of the control raising the event
+     * @param  rowId Row Id, if applicable
+     */
     onCheckChanged(event, idx, rowId) {
         if (typeof rowId === 'undefined')
             rowId = 0;
@@ -2107,12 +2889,12 @@ class TaskMagicService {
             guiEvent.Value = event;
         }
         else if (typeof (event) == 'string') {
-            if (event == "unchecked") {
+            if (event == "unchecked") { // @ts-ignore
                 guiEvent.Value = false;
             }
             else if (event == 'indeterminate')
                 guiEvent.Value = null;
-            else if (event == 'checked') {
+            else if (event == 'checked') { // @ts-ignore
                 guiEvent.Value = true;
             }
         }
@@ -2124,11 +2906,21 @@ class TaskMagicService {
         }
         this.insertEvent(guiEvent);
     }
+    /**
+     * Handle tab selection change, caused by UI events
+     * @param idx Id of the control raising the event
+     * @param  layer Id of selected tabpage
+     */
     mgOnTabSelectionChanged(idx, layer) {
         let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
         guiEvent.Value = layer.toString();
         this.insertEvent(guiEvent);
     }
+    /**
+     * Handle the Radio button "change" event
+     * @param  event The event received from the UI
+     * @param idx Id of the control raising the event
+     */
     mgOnRadioSelectionChanged(idx) {
         let result = this.getFormControl('0', idx);
         let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
@@ -2138,16 +2930,34 @@ class TaskMagicService {
             guiEvent.Value = result.value.toString();
         this.insertEvent(guiEvent);
     }
+    /**
+     * Inserts the "close" event to the magic WebClient event queue
+     */
     close() {
         this.insertEvent(getGuiEventObj('close', null, 0));
     }
+    ///////////////////////////////
+    /**
+     * @ignore
+     */
     IsStub() {
         return this.magic.isStub;
     }
+    //////////////////////////////////////////////////////////////
+    ///Stub handling
+    /**
+     * @ignore
+     */
     jsonData;
+    /**
+     * @ignore
+     */
     saveData(data) {
         this.magic.saveData(data);
     }
+    /**
+     * @ignore
+     */
     createData() {
         let myData = {
             records: this.Records,
@@ -2159,6 +2969,9 @@ class TaskMagicService {
         console.log(text);
         this.saveData(text);
     }
+    /**
+     * @ignore
+     */
     loadStubData(stubData) {
         this.Records = stubData.records;
         this.settemplate(stubData.template);
@@ -2166,9 +2979,15 @@ class TaskMagicService {
         for (let i = 0; i < this.Records.list.length; i++)
             this.buildTableRowControls(i);
     }
+    /**
+     * @ignore
+     */
     loadData() {
         alert('Please, overwrite method loadData');
     }
+    /**
+     * @ignore
+     */
     setStubValue(guiRowId, fc, name) {
         if (this.IsStub()) {
             try {
@@ -2179,45 +2998,79 @@ class TaskMagicService {
             }
         }
     }
-    static ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function TaskMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskMagicService, [{
         type: Injectable
     }], () => [{ type: EngineMagicService }, { type: OverlayWindowService }], null); })();
 
+/**
+ * Implements various table-related functionalities
+ */
 class TableMagicService {
     componentList;
     task;
     selectedItem;
     chunkSize;
+    /**
+     *
+     * @param componentList Component-mapping service
+     * @param task Magic task service
+     */
     constructor(componentList, task) {
         this.componentList = componentList;
         this.task = task;
     }
     shouldOpenFieldTextEditor = true;
+    /**
+     * Refreshes the DataSource
+     */
     refreshDataSource() {
     }
+    /**
+     * Returns the table page size
+     * chunkSize as default value for non-paginated tables.
+     */
     getPageSize() {
         return this.chunkSize;
     }
     setChunkSize(size) {
         this.chunkSize = size;
     }
+    /**
+     * Returns max no of rows in the table.
+     */
     getMaxRowsInTable() {
         return this.task.Records.list.length;
     }
+    /**
+     * Selects the specified row
+     * @param rowId The row to select
+     */
     selectRow(rowId) {
         this.selectedItem = rowId;
     }
     getSelectedRow() {
         return this.selectedItem;
     }
+    /**
+     * Returns the selected row
+     */
     selectedRow() {
         return null;
     }
+    /**
+     * Selects the specified page
+     * @param  pageId The page to select
+     */
     selectPage(pageId) {
     }
+    /**
+     * Returns whether a dialog should be opened for the HTML element
+     * @param  element The HTML element for which a dialog may be needed
+     * @returns
+     */
     OpenDialogForControl(element) {
         if (element.tagName === "MAT-SELECT" || element.tagName === "MAT-CHECKBOX" ||
             element.tagName === "INPUT" ||
@@ -2225,17 +3078,34 @@ class TableMagicService {
             return false;
         return true;
     }
+    /**
+     * Returns the dialog used to edit values
+     */
     getDialog() {
         return null;
     }
+    /**
+     * Handles the table "scrolled" event
+     */
     onScrollDown() {
         this.task.onScrollDown();
     }
+    /**
+     * To be overwitten in specific implelemtations
+     */
     sortData(e) { }
+    /**
+     * To be overwitten in specific implelemtations
+     */
     mgOnPaginateChange(e, changeSelectedRow) { }
     mgOptionChanged(e) { }
+    /**
+     * Change the number of lines in a table
+     * @param  size New number of lines in table
+     */
     updateTableSize(size) {
-        if (size === 0) {
+        if (size === 0) // never remove row 0 for now
+         {
             size = 1;
             this.task.Records.clearFirstTableRecord(this.task.template);
         }
@@ -2243,34 +3113,51 @@ class TableMagicService {
         this.task.Records.updateSize(size);
         this.task.setIncludesFirst(false);
     }
+    /**
+     * @ignore
+     */
     setTableTopIndex(value) {
         if (!this.task.Records.includesFirst)
             value++;
         this.task.Records.setGuiTopIndex(value);
     }
+    /**
+     * @ignore
+     */
     getTableTopIndex() {
         let topIndex = this.task.Records.getGuiTopIndex();
         if (!this.task.Records.includesFirst)
             topIndex--;
         return topIndex;
     }
-    static ɵfac = function TableMagicService_Factory(t) { return new (t || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function TableMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableMagicService, [{
         type: Injectable
     }], () => [{ type: ComponentListMagicService }, { type: TaskMagicService }], null); })();
 
+/**
+ * Enables changing the browser title using Magic expression (SetTitle)
+ */
 class TitleMagicService {
     titleService;
+    /**
+     *
+     * @param titleService Angular's title-changing class
+     */
     constructor(titleService) {
         this.titleService = titleService;
     }
+    /**
+     * Set the new title of the window
+      * @param newTitle New title of the window
+     */
     setTitle(newTitle) {
         this.titleService.setTitle(newTitle);
     }
-    static ɵfac = function TitleMagicService_Factory(t) { return new (t || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function TitleMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TitleMagicService, [{
         type: Injectable
@@ -2294,6 +3181,7 @@ class MagicColorService {
     }
     colorsData;
     fileNotFound = false;
+    // public static FILE_NAME;
     constructor(http, colorFile1 = 'clr_rnt.eng') {
         this.http = http;
         if (colorFile1)
@@ -2313,6 +3201,7 @@ class MagicColorService {
     }
     hexToRgba(hex, isTransperent) {
         let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i;
+        // convert it to format : aarrggbb
         hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
             return a + a + r + r + g + g + b + b;
         });
@@ -2327,16 +3216,24 @@ class MagicColorService {
             rgb.alpha = 0;
         return 'rgba(' + rgb.red + ',' + rgb.green + ',' + rgb.blue + ',' + rgb.alpha + ')';
     }
+    /**
+     * Returns the rgba value of specified color
+     * @returns : value in format rgba(128,128,128,1)
+     * @param : colorNumber -0 based index of color for which RGBA values are returned
+     * @param: colorType : 1-MAGIC_FG_COLOR, 2-MAGIC_BG_COLOR
+     */
     getColor(colorIndex, colorType) {
         let isTransperent = false;
         if (!this.colorsData && !this.fileNotFound)
             this.getColorData();
-        if (this.colorsData) {
+        if (this.colorsData) { // color exists
             if (this.colorsData[colorIndex - 1]) {
                 const grayHashCode = '00808080';
                 let hex = grayHashCode;
-                let color = this.colorsData[colorIndex - 1].split(',');
+                let color = this.colorsData[colorIndex - 1].split(','); // get the color details
                 let colorAtrributes = +color[3];
+                // color[0] - name, color[1] - FG color, color[2] - BG color
+                // color[3] - attr flags (1 - transperent, 2 - system FG, 4 - system bg)
                 switch (colorType) {
                     case MAGIC_FG_COLOR:
                         if (colorAtrributes != SYSTEM_FG && colorAtrributes != SYSTEM_FG_AND_SYSTEM_BG)
@@ -2360,8 +3257,8 @@ class MagicColorService {
         }
         return '';
     }
-    static ɵfac = function MagicColorService_Factory(t) { return new (t || MagicColorService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(COLOR_FILE_NAME)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: MagicColorService, factory: MagicColorService.ɵfac, providedIn: 'root' });
+    /** @nocollapse */ static ɵfac = function MagicColorService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicColorService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(COLOR_FILE_NAME)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicColorService, factory: MagicColorService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicColorService, [{
         type: Injectable,
@@ -2373,17 +3270,35 @@ class MagicColorService {
                 args: [COLOR_FILE_NAME]
             }] }], null); })();
 
+/**
+ * Provides the UI with values calculated by the Magic WebClient
+ */
 class AccessorMagicService {
     task;
     magicColor;
     Logger = null;
     hhmm = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });
     hhmmss = maskitoTimeOptionsGenerator({ mode: 'HH:MM:SS' });
+    /**
+     * @ignore
+     */
     constructor(task, magicColor) {
         this.task = task;
         this.magicColor = magicColor;
         this.Logger = Logger.Instance;
     }
+    UploadFileToServer(fileContent, serverFileName) {
+        return this.task.UploadFileToServer(fileContent, serverFileName);
+    }
+    async DownloadFileFromServer(serverFileName) {
+        return await this.task.DownloadFileFromServer(serverFileName);
+    }
+    /**
+     * Checks if the control is read-only
+     * @param controlId Id of control
+     * @returns Is the control not read-only
+     */
+    // CheckReadOnly
     checkIsReadOnly(controlId) {
         let properties;
         properties = this.task.Records.list[0].getControlMetadata(controlId);
@@ -2392,34 +3307,91 @@ class AccessorMagicService {
         else
             return false;
     }
+    /**
+     * Returns the text of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns The text of the control
+     */
+    // mgGetText
     getText(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.Text, rowId);
     }
+    /**
+     * Gets the text of the tab page
+     * @param controlId Id of control
+     * @param layer Id of tabpage
+     * @returns Text of tabpage
+     */
+    // mgGetTabpageText
     getTabpageText(controlId, layer) {
         const items = this.task.getProperty(controlId, HtmlProperties.ItemsList);
         if (typeof items !== "undefined")
             return items[layer].displayValue;
         return "";
     }
+    /**
+     * Gets the image defined for the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns Image set on control
+     */
+    // mgGetImage
     getImage(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Image, rowId);
         return result;
     }
+    /**
+     * Returns whether an image is set for this control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns returns true if control has an image set on it
+     */
+    // mgIsImageExists
     isImageExists(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Image, rowId);
         return !isNullOrUndefined(result);
     }
+    /**
+     * Gets the CSS classes set on the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns The classes for this control
+     */
+    // mgGetClasses
     getClasses(controlId, rowId) {
         return this.task.getClasses(controlId, rowId);
     }
+    /**
+     * Gets the CSS styles set on the control
+     * @param controlId Id of control
+     * @param styleName NAme of style requested
+     * @param rowId Id of row, if applicable
+     * @returns The style set on the control
+     */
+    // mgGetStyle
     getStyle(controlId, styleName, rowId) {
         let style = this.task.getStyle(controlId, styleName, rowId);
         return style;
     }
+    /**
+     * Returns whether a control is visible or not
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns Is the control visible or hidden
+     */
+    // mgGetVisible
     getVisible(controlId, rowId) {
         let vis = this.getProperty(controlId, HtmlProperties.Visible, rowId);
         return vis ? 'visible' : 'hidden';
     }
+    /**
+     * Returns alpha mask of a control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns alpha mask of the control
+     */
+    // getAlphaMask
     getAlphaMask(controlId, rowId) {
         if (isNullOrUndefined(controlId))
             return null;
@@ -2443,6 +3415,12 @@ class AccessorMagicService {
         }
         return (pic != null) ? valueStr.toString() : null;
     }
+    /**
+     * Returns object representing numeric picture
+     * @param picture string which is defined in magic
+     * @returns object representing numeric picture
+     */
+    // mgGetNumericPicture
     getNumericPicture(picture) {
         var obj = {};
         if (isNullOrUndefined(picture))
@@ -2475,51 +3453,140 @@ class AccessorMagicService {
             obj['wholes'] = pic.getWholes();
         return obj;
     }
+    /**
+     * Returns whether a control should have the "required" attribute set on it
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetMustInput
     getMustInput(controlId, rowId) {
         let vis = this.getProperty(controlId, HtmlProperties.MustInput, rowId);
         return vis ? 'true' : 'false';
     }
+    /**
+     * Returns whether a control is disabled
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgIsDisabled
     isDisabled(controlId, rowId) {
         let result = this.getProperty(controlId, HtmlProperties.Enabled, rowId);
         return result === true ? null : true;
     }
+    /**
+     * @ignore
+     */
+    // getProperty (not changed)
     getProperty(controlId, prop, rowId) {
         return this.task.getProperty(controlId, prop, rowId);
     }
+    /**
+     * Returns the title (tooltip) text of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetTitle
     getTitle(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.Tooltip, rowId);
     }
+    /**
+     * Returns the title (tooltip) text of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetTitle for zoom button
     getZoomButtonTitle(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.ZoomButtonTooltip, rowId);
     }
+    /**
+     * Gets the selection control's selected value
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // getSelectedValue
     getSelectedValue(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.SelectedValue, rowId);
     }
+    /**
+     * Gets the place-holder text of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetPlaceholder
     getPlaceholder(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.PlaceHolder, rowId);
     }
+    /**
+     * Returns a type for input controls - should the control be a simple text or a password control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetType
     getType(controlId, rowId) {
         let result = this.task.getProperty(controlId, HtmlProperties.Password, rowId);
         return result ? "password" : "text";
     }
+    /**
+     * Returns the tab-index of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetTabIndex
     getTabIndex(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.TabIndex, rowId);
     }
+    /**
+     * Returns the value of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    /// mgGetValue -->
     getValue(controlId, rowId) {
         let val = this.task.getValue(controlId, rowId);
         return val;
     }
+    /**
+     * Returns the formatted value of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    /// mgGetValue -->
     getFormattedValue(controlId, rowId) {
         let val = this.task.getValue(controlId, rowId);
         val = this.task.getFormattedValue(controlId, val, rowId);
         return val;
     }
+    /**
+     * Returns the Picture of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    /// getPicture -->
     getPicture(controlId, rowId) {
         if (isNullOrUndefined(controlId))
             return null;
         let pic = this.task.GetControlPictureMask(controlId);
         return (pic != null) ? pic.getFormat().toString() : null;
     }
+    /**
+     * Returns the custom (user) properties of the control
+     * @param controlId Id of control
+     * @param propertyName Name of requested property
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetCustomProperty
     getCustomProperty(controlId, propertyNameOrRowID, rowId) {
         if (controlId.indexOf('~') == -1)
             return this.getCustomProperty_1(controlId, propertyNameOrRowID, rowId);
@@ -2544,9 +3611,22 @@ class AccessorMagicService {
         }
         return userProperties;
     }
+    /**
+     * Gets the values of the items of a selection control
+     * @param id Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
+    // mgGetItemListValues
     getItemListValues(id, rowId) {
         return this.getProperty(id, HtmlProperties.ItemsList, rowId);
     }
+    /**
+     * Gets the filtered items list based on the current value of the control
+     * @param controlId Id of control
+     * @param rowId Id of row, if applicable
+     * @returns
+     */
     getFilteredList(controlId, rowId) {
         if (isNullOrUndefined(rowId))
             rowId = '0';
@@ -2559,6 +3639,12 @@ class AccessorMagicService {
         else
             return items;
     }
+    /**
+   * 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
+   */
     getDisplayValue(id, rowId) {
         let displayValue = "";
         let o = this.getProperty(id, HtmlProperties.ItemsList, rowId);
@@ -2567,6 +3653,12 @@ class AccessorMagicService {
             displayValue = o[value].displayValue;
         return displayValue;
     }
+    /**
+     * Returns whether a tab page is selected or not
+     * @param  index of current option in iterarotr
+     * @param control Id of list control
+     * @returns
+     */ // isOptionSelected
     isOptionSelected(index, controlId) {
         let val = this.task.getValue(controlId, "0");
         for (let item of val) {
@@ -2575,18 +3667,40 @@ class AccessorMagicService {
         }
         return false;
     }
+    /**
+     * Returns whether a tab page is selected or not - used for the tab buttons
+     * @param controlId Id of control
+     * @param  layer Id of the tab page
+     * @returns
+     */ // mgIsTabPageSelected
     isTabPageSelected(controlId, layer) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedValue);
-        return val == (layer - 1);
-    }
+        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
     isTabPageLayerSelected(controlId, layer) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedLayer);
-        return val == (layer - 1);
+        return val == (layer - 1); // comparing string to number!
     }
+    /**
+     * Returns the index of the selected tab page
+     * @param controlId Id of control
+     * @returns
+     */
     getTabSelectedIndex(controlId) {
         let val = this.task.getProperty(controlId, HtmlProperties.SelectedValue);
-        return val;
+        return val; // comparing string to number!
     }
+    // private methodes
+    /**
+     * @ignore
+     */
+    // mgIfRowCreated
     ifRowCreated(row) {
         if (row == null)
             return false;
@@ -2594,59 +3708,83 @@ class AccessorMagicService {
         let result = this.getFormGroupByRow(rowId);
         return !isNullOrUndefined(result);
     }
+    /**
+     * @ignore
+     */
+    // mgGetFormGroupByRow
     getFormGroupByRow(id) {
         return this.task.formGroups[id];
     }
+    /**
+     * @ignore
+     */
+    // isRowSelected (not changed)
     isRowSelected(controlId, rowId) {
         const selectedRow = this.task.getProperty(controlId, HtmlProperties.SelectedRow, "0");
         return selectedRow == rowId;
     }
+    /**
+     * Returns whether a row is in edit state
+     * @param row
+     */
     isRowInRowEditing(row) {
         let guiRowId = '0';
         guiRowId = typeof row == "number" ? row.toString() : row.rowId;
         return this.task.isRowInRowEditing(guiRowId);
     }
+    /**
+     * Returns whether a row is in edit state, use this method while control outside table control
+     * @param row
+     */
     isCurrentInRowEditing() {
         let row = this.task.tableService.getSelectedRow();
         return this.task.isRowInRowEditing(row);
     }
+    /**
+     * @ignore
+     */
+    // GetGuiTopIndex
     guiTopIndex() {
         return this.task.tableService.getTableTopIndex();
     }
+    /**
+     * @ignore
+     */
     getErrMsg(id, rowId) {
         let c = this.task.getFormControl(rowId, id);
         if (c.hasError('required'))
-            return 'Control must be updated.';
+            return Events.GetMessageString(MsgInterface.RT_STR_FLD_MUST_UPDATED);
         if (c.hasError('pattern')) {
+            //To check whether the numeric field allowed only positive values or not.
             if (c.errors.pattern.actualValue < 0 && !c.errors.pattern.requiredPattern.includes('-'))
-                return 'Value must be non-negative';
+                return Events.GetMessageString(MsgInterface.STR_ERR_NEGETIVE);
             if (c.errors.pattern.requiredPattern.includes('.')) {
                 const numericFormat = Math.abs(c.errors.pattern.actualValue).toString().split('.')[0];
                 const decimalFormat = Math.abs(c.errors.pattern.actualValue).toString().split('.')[1];
                 const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
                 const actualDecimalLimit = c.errors.pattern.requiredPattern.match(/(?:[^,]+,){2}(\d+)/)[1];
                 if (numericFormat.length > actualNumericLimit || decimalFormat.length > actualDecimalLimit) {
-                    return "Numeric format is limited to " + actualNumericLimit + "." + actualDecimalLimit + " digits";
+                    return this.getNumericFormatErrorString(actualNumericLimit, actualDecimalLimit);
                 }
             }
             else if (!c.errors.pattern.requiredPattern.includes('.') && !Number.isInteger(c.errors.pattern.actualValue)) {
                 const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
-                return "Numeric format is limited to " + actualNumericLimit + "." + 0 + " digits";
+                return this.getNumericFormatErrorString(actualNumericLimit, 0);
             }
             else {
                 const numericFormat = Math.abs(c.errors.pattern.actualValue).toString();
                 const actualNumericLimit = c.errors.pattern.requiredPattern.match(/,(\d+)/)[1];
                 if (numericFormat.length > actualNumericLimit) {
-                    return "Numeric format is limited to " + actualNumericLimit + "." + 0 + " digits";
+                    return this.getNumericFormatErrorString(actualNumericLimit, 0);
                 }
             }
         }
         if (c.hasError('rangevalidator'))
             return c.errors.rangevalidator.errorMsg;
         if (c.hasError('maxlength'))
-            return 'Max length allowed is : ' + c.errors.maxlength.requiredLength;
+            return Events.GetMessageString(MsgInterface.STR_ERR_MAX_ALLOWED_LENGTH) + c.errors.maxlength.requiredLength;
         if (c.hasError('max'))
-            return 'Max value allowed is : ' + c.errors.max.max;
+            return Events.GetMessageString(MsgInterface.STR_ERR_MAX_ALLOWED_VALUE) + c.errors.max.max;
         let controlMetadata = this.task.Records.list[rowId].getControlMetadata(id);
         for (let key of controlMetadata.customValidators.keys()) {
             if (c.hasError(key)) {
@@ -2656,6 +3794,19 @@ class AccessorMagicService {
         }
         return 'unknown error';
     }
+    getNumericFormatErrorString(wholeLimit, decimalLimit) {
+        let token = "%d";
+        let messageString = Events.GetMessageString(MsgInterface.EDT_ERR_STR_1);
+        messageString = StrUtil.replaceStringTokens(messageString, token, 1, wholeLimit.toString());
+        messageString = StrUtil.replaceStringTokens(messageString, token, 1, decimalLimit.toString());
+        return messageString;
+    }
+    /**
+     * Sets a user-supplied value to the specified control
+     * @param controlName
+     * @param value
+     * @param refreshDisplay
+     */
     setValueToControl(controlName, value, refreshDisplay) {
         if (typeof refreshDisplay === "undefined")
             refreshDisplay = true;
@@ -2664,28 +3815,44 @@ class AccessorMagicService {
         guiEvent.param = refreshDisplay;
         this.task.insertEvent(guiEvent);
     }
+    /**
+   * @ignore
+   */
     isDataviewEmpty() {
         return this.task.Records.isEmptyDataView;
     }
+    /**
+     * simulates a click event on the specified control, for the Magic engine
+     * @param controlName
+     * @param rowId
+     */
     simulateClick(controlName, rowId) {
         if (typeof rowId === "undefined")
             rowId = 0;
         this.task.insertEvent(getGuiEventObj('click', controlName, rowId));
     }
+    /**
+     * Return Boolean TRUE if user logged in Else it will return FALSE
+     */
     isLoggedIn() {
         return this.task.getIsLoggenIn();
     }
+    /**
+     * Returns JS object containing the records with all table fields.
+     */
     GetFormRecords() {
         let rowId = 0;
         let recArray;
         if (!isNullOrUndefined(this.task.Records) && this.task.Records.list.length > 0) {
             let recList = this.task.Records.list;
             let tableControls = new Array();
+            //Generate list of table fields names
             for (const key in this.task.template) {
                 if (this.task.template[key] == '1')
                     tableControls.push(key);
             }
             recArray = new Array();
+            //Update the records as list of objects with values for table fields.
             if (tableControls.length > 0) {
                 recList.forEach((ctrlMetaData) => {
                     if (this.task.Records.isRowCreated(rowId)) {
@@ -2701,31 +3868,54 @@ class AccessorMagicService {
         }
         return recArray;
     }
+    /**
+     * SetCookie : set the cookie with specified name and value  in browser
+     * expires - expiration time
+     * path - path which much exists in order so that cookie is sent as header
+     * domain - specifies which hosts are allowed to receive the cookie
+     * secure - specifies if cookie is secure ( works only with HTTPS)
+     * sameSite - lets servers specify whether/when cookies are sent with cross-site requests
+     */
     SetCookie(name, value, expires, path, domain, secure, sameSite) {
         CookieService.setCookie(name, value, expires, path, domain, secure, sameSite);
     }
+    /**
+     * GetCookie : get the cookie with specified name and value  in browser
+     */
     GetCookie(name) {
         return CookieService.getCookie(name);
     }
+    /**
+     * DeleteCookie : deletes the cookie
+     */
     DeleteCookie(name) {
         return CookieService.deleteCookie(name);
     }
+    /**
+    * get RGBA color from color file
+    */
     getColor(colorNumber, colorType) {
         return this.magicColor.getColor(colorNumber, colorType);
     }
-    static ɵfac = function AccessorMagicService_Factory(t) { return new (t || AccessorMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MagicColorService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function AccessorMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccessorMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MagicColorService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessorMagicService, [{
         type: Injectable
     }], () => [{ type: TaskMagicService }, { type: MagicColorService }], null); })();
 
+/**
+ * Central place for adding the Magic services
+ */
 class MagicServices {
     task;
     subformService;
     tableService;
     titleService;
     mgAccessorService;
+    /**
+     * @ignore
+     */
     constructor(task, subformService, tableService, titleService, mgAccessorService) {
         this.task = task;
         this.subformService = subformService;
@@ -2737,41 +3927,85 @@ class MagicServices {
         task.mgTitleService = titleService;
         task.mgAccessorService = mgAccessorService;
     }
-    static ɵfac = function MagicServices_Factory(t) { return new (t || MagicServices)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(SubformMagicService), i0.ɵɵinject(TableMagicService), i0.ɵɵinject(TitleMagicService), i0.ɵɵinject(AccessorMagicService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
+    /** @nocollapse */ static ɵfac = function MagicServices_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicServices)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(SubformMagicService), i0.ɵɵinject(TableMagicService), i0.ɵɵinject(TitleMagicService), i0.ɵɵinject(AccessorMagicService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicServices, [{
         type: Injectable
     }], () => [{ type: TaskMagicService }, { type: SubformMagicService }, { type: TableMagicService }, { type: TitleMagicService }, { type: AccessorMagicService }], null); })();
 
+/**
+ * Base component representing a Magic task
+ */
 class TaskBaseMagicComponent {
     ref;
     magicServices;
+    /**
+     * Id of task, used for initializing the task service
+     */
     taskIdParam;
+    /**
+     * @ignore
+     */
     taskDescription;
+    /**
+     * @ignore
+     */
     magicProperties = MagicProperties;
+    /**
+     *
+     * @param ref changes-detector object
+     * @param magicServices Access point for all Magic services
+     */
     constructor(ref, magicServices) {
         this.ref = ref;
         this.magicServices = magicServices;
     }
+    /**
+     * Returns the Magic task service
+     * @returns
+     */
     get task() {
         return this.magicServices.task;
     }
+    /**
+     * Returns the Magic subform service
+     * @returns
+     */
     get mgSub() {
         return this.magicServices.subformService;
     }
+    /**
+     * Returns the Magic table service
+     * @returns
+     */
     get tableService() {
         return this.magicServices.tableService;
     }
+    /**
+     * Returns the Magic accessor service
+     * @returns
+     */
     get mg() {
         return this.magicServices.mgAccessorService;
     }
+    /**
+     * Returns the task Id
+     * @returns
+     */
     get taskId() {
         return this.task.taskId;
     }
+    /**
+     * Returns the FormGroup for screen-mode forms
+     * @returns
+     */
     get screenFormGroup() {
         return this.task.ScreenModeControls;
     }
+    /**
+     * Interface implementation
+     */
     ngOnInit() {
         this.task.detectChanges.pipe().subscribe(c => {
             this.ref.detectChanges();
@@ -2779,24 +4013,61 @@ class TaskBaseMagicComponent {
         this.task.initTask(this.taskIdParam, this.taskDescription);
         this.createFormControlsAccessor(this.screenFormGroup);
         this.setInputDateFormat();
+        // subcribe to custom property changes
         this.task.customPropertiesSubject.pipe().subscribe(property => {
             this.PropertyChanged(property.propertyName, property.rowId, property.value);
         });
+        // subcribe to records count changes
         this.task.recordsCountChangeSubject.pipe().subscribe(value => {
             this.RecordsCountChanged(value);
         });
+        // subcribe to mgLoad change
         this.task.mgLoadSubject.pipe().subscribe(value => {
             this.mgOnLoad();
         });
     }
+    /**
+     * @ignore
+     */
     createFormControlsAccessor(formGroup) { }
+    /**
+     * @ignore
+     */
     setInputDateFormat() { }
+    /**
+     * This method is called when the value of any custom property is updated in Magic
+     * propertyName : name of property which is updated. The format is <controlname>~<propertyname>
+     * rowId : row number of the updated property for controls in table control (0 for controls outside table)
+     * value : updated value of the property
+     * @returns : void
+     * To use the method override it in your component and check the property name and write you code ..for eg
+     * if(propertyName == 'controlname~propertyName') {// your code}
+     *  else { // your code}
+     */
     PropertyChanged(propertyName, rowId, value) {
-    }
+        // intentionally left blank because the implementation should be in the derived class
+    }
+    /**
+     * Records count change subject is subscribed to change in its value. This method will be called
+     * as the value of records count is received at from server.
+     * @returns : void
+     * To use the method override it in your component.
+     */
     RecordsCountChanged(recordsCount) {
-    }
+        // intentionally left blank because the implementation should be in the derived class
+    }
+    /**
+     * This method will be called once engine informs UI about loading of first set of data is sent to client
+     * and client has reached its first idle time.
+     * @returns : void
+     * To use the method override it in your component.
+     */
     mgOnLoad() {
+        // intentionally left blank because the implementation should be in the derived class
     }
+    /**
+     * Interface implementation
+     */
     ngAfterViewInit() {
         this.mgSub.init();
     }
@@ -2806,37 +4077,53 @@ class TaskBaseMagicComponent {
             this.task.oldPageSize = this.tableService.getPageSize();
         }
     }
+    /**
+     * Interface implementation
+     */
     ngOnDestroy() {
         this.task.dispose();
     }
-    static ɵfac = function TaskBaseMagicComponent_Factory(t) { return new (t || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
-    static ɵ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 });
+    /** @nocollapse */ static ɵfac = function TaskBaseMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TaskBaseMagicComponent, selectors: [["task-magic"]], inputs: { taskIdParam: "taskIdParam", taskDescription: "taskDescription" }, standalone: false, features: [i0.ɵɵProvidersFeature([TaskMagicService, SubformMagicService, TableMagicService])], decls: 0, vars: 0, template: function TaskBaseMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskBaseMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'task-magic',
                 providers: [TaskMagicService, SubformMagicService, TableMagicService],
-                template: ''
+                template: '',
+                standalone: false
             }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: MagicServices }], { taskIdParam: [{
             type: Input
         }], taskDescription: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskBaseMagicComponent, { className: "TaskBaseMagicComponent", filePath: "src\\ui\\task-base.magic.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskBaseMagicComponent, { className: "TaskBaseMagicComponent", filePath: "src/ui/task-base.magic.component.ts", lineNumber: 21 }); })();
 
+/**
+ * @ignore
+ */
 class RowMagicDirective {
     _task;
     element;
     rowId;
+    /**
+     * The HTML element connected to this directive
+     */
     htmlElement;
+    /**
+     * @ignore
+     */
     rowChangedSubscriber = null;
     constructor(_task, element) {
         this._task = _task;
         this.element = element;
         this.htmlElement = this.element.nativeElement;
     }
+    /**
+     * Initializes this object
+     */
     ngOnInit() {
         this.rowChangedSubscriber = this._task
             .OnSelectedRowChanged.pipe(filter(rowId => rowId === this.rowId))
@@ -2851,7 +4138,16 @@ class RowMagicDirective {
         return (rect.top >= parentRect.top &&
             rect.bottom <= parentRect.bottom);
     }
+    /**
+     * Cleanup
+     */
     ngOnDestroy() {
+        // Don't know why, but when the table is loaded for the first time, we
+        // get ngOnInit() for the 1st row (rowId = "0") and then ngOnDestroy()
+        // for number of rows in the page but here this.rowId is undefined.
+        // Since ngOnInit() was not called for all these rows, this.rowChangedSubscriber
+        // is null and hence crashes.
+        // So, the condition to check nulity is added.
         if (this.rowChangedSubscriber !== null) {
             this.rowChangedSubscriber.unsubscribe();
         }
@@ -2863,15 +4159,16 @@ class RowMagicDirective {
                 event.cancelBubble = true;
         }
     }
-    static ɵfac = function RowMagicDirective_Factory(t) { return new (t || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: RowMagicDirective, selectors: [["", "magicRow", ""]], hostBindings: function RowMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function RowMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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: [i0.ɵɵInputFlags.None, "magicRow", "rowId"] } });
+        } }, inputs: { rowId: [0, "magicRow", "rowId"] }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RowMagicDirective, [{
         type: Directive,
         args: [{
-                selector: '[magicRow]'
+                selector: '[magicRow]',
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }], { rowId: [{
             type: Input,
@@ -2881,6 +4178,9 @@ class RowMagicDirective {
             args: ['click', ['$event']]
         }] }); })();
 
+/**
+ * Connects HTML elements to the Magic Web Client engine
+ */
 class MagicDirective {
     _task;
     element;
@@ -2893,24 +4193,64 @@ class MagicDirective {
         this.selector = "magic";
     }
     ;
+    /**
+     * This flag is used when we only want to register to events, but do not want to execute commands sent from server
+     */
     set eventsOnly(val) {
         console.log("eventsOnly");
         this.eventsOnlyVal = true;
     }
     ;
+    /**
+     * pollTime: after which value will be sent to magic
+     */
     pollTime = 200;
+    /**
+     * Row id of the control, for when it is on a table
+     */
     rowId;
+    /**
+     *
+     */
+    //@Input() events: any[] = [];
+    /**
+     * The HTML element connected to this directive
+     */
     htmlElement;
+    /**
+     * Magic's component handling this control
+     */
     component;
+    /**
+     * Collection of event handlers for this element
+     */
     eventHandlers = {};
+    /**
+     * Id of this element
+     */
     id;
+    /**
+     * @ignore
+     */
     selector;
+    /**
+     * @ignore
+     */
     subscribeRefreshDom;
     focusUnlistener;
     eventsOnlyVal = false;
     static opened = false;
     static noOfAutoCompleteBoxesOpened = 0;
     subscribeInteractiveCommands;
+    /**
+     *
+     * @param _task The task service
+     * @param element The element for which the directive is applied
+     * @param renderer Renderer for the element
+     * @param vcRef
+     * @param platform
+     * @param magicRow
+     */
     constructor(_task, element, renderer, vcRef, platform, magicRow) {
         this._task = _task;
         this.element = element;
@@ -2919,23 +4259,43 @@ class MagicDirective {
         this.platform = platform;
         this.magicRow = magicRow;
         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;
     }
+    /**
+     * Get the task service
+     * @returns
+     */
     get task() {
         return this._task;
     }
+    /**
+     * Register to the events this element may need to handle
+     */
     regEvents() {
+        // Handle events for which event handler may be removed and restored
         this.eventHandlers["focusin"] = this.OnFocus.bind(this);
         Object.keys(this.eventHandlers).forEach((key) => {
             this.focusUnlistener = this.renderer.listen(this.htmlElement, key, this.eventHandlers[key]);
         });
-        let events = ["click", "mousedown", "dblclick"];
+        // Handle events with anonymous  event handlers
+        let events = ["click", "mousedown", "dblclick"]; // ,'resize', 'load', 'unload'
         events.forEach(event => {
             this.renderer.listen(this.htmlElement, event, (e) => {
+                // check if the event is fired from zoom button ( to identify the connected zoom button in engine)
                 let fromButton = false;
                 if (this.htmlElement instanceof HTMLButtonElement)
                     fromButton = true;
+                /**
+                 * In the case of Safari or Chrome browser on IOS, when a button is clicked, the browser does not receive
+                 * focus event hence the zoom action is not executed. So in order to receive focus event, enabling it exclusively
+                 * in the case of Safari or Chrome browser on IOS and Safari browser on Mac.
+                 */
                 if (fromButton && (this.platform.IOS || this.platform.SAFARI))
                     this.task.insertEvent(getGuiEventObj("focus", this.id, +this.rowId));
                 this.task.insertEvent(getGuiEventObj(event, this.id, +this.rowId, fromButton));
@@ -2951,10 +4311,13 @@ class MagicDirective {
                 this.task.insertEvent(guiEvent);
             }
         });
+        // handle the input event
         fromEvent(this.htmlElement, "input").pipe(map((event) => {
             return event.target.value;
-        }), debounceTime(this.pollTime)).subscribe((x) => {
+        }), debounceTime(this.pollTime) // time after which value will be sent to magic
+        ).subscribe((x) => {
             if (this.task.getProperty(this.id, HtmlProperties.BindingLevel, this.rowId) === BindingLevel.Character) {
+                // Don't support character binding for date/time values
                 let attribute = this.task.Records.list[0].getControlMetadata(this.id).dataType;
                 if (attribute !== StorageAttributeType.Date && attribute != StorageAttributeType.Time)
                     this.task.mgAccessorService.setValueToControl(this.id, x, true);
@@ -2980,16 +4343,25 @@ class MagicDirective {
                 (e.keyCode >= GuiConstants.KEY_F1 && e.keyCode <= GuiConstants.KEY_F12);
             if (guiEvent.modifiers !== Modifiers.MODIFIER_NONE || supportedKey) {
                 guiEvent.keyCode = e.keyCode;
+                // Defect 160021 fixed - don't set e.cancelBubble when combobox is opened and esc key is pressed
                 if (e.keyCode !== GuiConstants.KEY_ESC || e.keyCode === GuiConstants.KEY_ESC && (!MagicDirective.opened && MagicDirective.noOfAutoCompleteBoxesOpened < 1))
                     e.cancelBubble = true;
                 this.task.insertEvent(guiEvent);
             }
         });
     }
+    /**
+     * Handle focus event
+     */
     OnFocus() {
         this.task.insertEvent(getGuiEventObj("focus", this.id, +this.rowId));
         event.cancelBubble = true;
     }
+    /**
+     * Is the command's element the same as this directive's element
+     * @param command
+     * @returns true/false
+     */
     IsSameElement(command) {
         let line = command.line;
         if (this.task.isTableControl(command.CtrlName))
@@ -2998,9 +4370,17 @@ class MagicDirective {
             (line === +this.rowId ||
                 (line === 0 && isNullOrUndefined(this.rowId))));
     }
+    /**
+     * Is the command's element the same as this directive's component
+     * @param command
+     * @returns true/false
+     */
     IsSameComponent(command) {
         return (command.controlName === this.id);
     }
+    /**
+     * @ignore
+     */
     regUpdatesUI() {
         this.subscribeRefreshDom = this.task
             .refreshDom.pipe(filter(c => this.IsSameElement(c)))
@@ -3022,10 +4402,17 @@ class MagicDirective {
             this.handleInteractiveCommands(command);
         });
     }
+    /**
+     * Initializes this object
+     */
     ngOnInit() {
         this.regEvents();
         this.regUpdatesUI();
     }
+    /**
+     * Handles the commands received from the Magic WebClient engine
+     * @param command
+     */
     handleCommand(command) {
         switch (command.CommandType) {
             case CommandType.SET_PROPERTY:
@@ -3033,12 +4420,16 @@ class MagicDirective {
                 break;
             case CommandType.SET_FOCUS:
                 this.focusUnlistener();
+                // Do not set focus on connected zoom  button
                 if (!(command.obj.ConnectedControl && this.htmlElement instanceof HTMLButtonElement))
                     this.htmlElement.focus();
                 this.focusUnlistener = this.renderer.listen(this.htmlElement, "focusin", this.eventHandlers["focusin"]);
                 break;
         }
     }
+    /**
+     * handle the interactive commands like CallJS
+     */
     handleInteractiveCommands(command) {
         switch (command._commandType) {
             case InteractiveCommandType.CALL_JS:
@@ -3048,18 +4439,24 @@ class MagicDirective {
                 let resultString = "";
                 try {
                     if (!isNullOrUndefined(magicComponent[methodName])) {
+                        // invoke the method on instance of magic componenet
                         resultString = magicComponent[methodName].apply(magicComponent, args);
                     }
                     else
-                        console.error("Instance method " + methodName + " does not exists");
+                        console.error("Instance method " + methodName + " does not exists"); // when method is not found
                 }
                 catch (e) {
+                    // any other exception
                     console.error(e.message);
                 }
-                command.resultString = resultString;
+                command.resultString = resultString; // update the return value
                 break;
         }
     }
+    /**
+     * Handle the Magic set-property command
+     * @param command
+     */
     handleSetProperty(command) {
         switch (command.Operation) {
             case HtmlProperties.ReadOnly:
@@ -3073,18 +4470,22 @@ class MagicDirective {
                 break;
         }
     }
+    /**
+     * Cleanup
+     */
     ngOnDestroy() {
         this.subscribeRefreshDom.unsubscribe();
     }
-    static ɵ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(i2$1.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", pollTime: "pollTime", rowId: "rowId" } });
+    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", pollTime: "pollTime", rowId: "rowId" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDirective, [{
         type: Directive,
         args: [{
-                selector: "[magic]"
+                selector: "[magic]",
+                standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.Platform }, { type: RowMagicDirective, decorators: [{
+    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }], { magic: [{
             type: Input,
@@ -3098,6 +4499,9 @@ class MagicDirective {
             type: Input
         }] }); })();
 
+/**
+ * @ignore
+ */
 class NoControlMagicDirective extends MagicDirective {
     set magic(val) { this.id = val; this.selector = 'magicnc'; }
     ;
@@ -3131,10 +4535,12 @@ class NoControlMagicDirective extends MagicDirective {
             }
         }
     }
+    // is the div a tab control
     isTabControl() {
         return this.htmlElement instanceof HTMLDivElement &&
             this.htmlElement.children[0].getAttribute('magicMark') === "magicTabControl";
     }
+    // is the div a radio buttons wrapper
     isRadio() {
         return this.htmlElement instanceof HTMLDivElement &&
             this.htmlElement.children[0].getAttribute('magicMark') === "magicRadio";
@@ -3143,6 +4549,7 @@ class NoControlMagicDirective extends MagicDirective {
         super.handleCommand(command);
         switch (command.CommandType) {
             case CommandType.SET_CLASS:
+                //remove the class which was replaced by this new one, as registered in the ControlMetadata
                 const controlMetadata = this._task.Records.list[0].getControlMetadata(this.id);
                 if (controlMetadata.removedClass != '') {
                     this.htmlElement.classList.remove(controlMetadata.removedClass);
@@ -3155,7 +4562,7 @@ class NoControlMagicDirective extends MagicDirective {
                     this.htmlElement.innerText = command.value;
                 if (this.htmlElement instanceof HTMLSelectElement)
                     this.htmlElement.value = command.value;
-                if (this.htmlElement instanceof HTMLAnchorElement)
+                if (this.htmlElement instanceof HTMLAnchorElement) //hyper-text button
                     this.htmlElement.text = command.value;
                 if (this.htmlElement instanceof HTMLInputElement) {
                     if (this.htmlElement.type === "checkbox") {
@@ -3179,6 +4586,7 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
+    // handle set-property commands
     handleSetProperty(command) {
         super.handleSetProperty(command);
         switch (command.Operation) {
@@ -3194,6 +4602,7 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
             case HtmlProperties.ItemsList:
                 if (this.htmlElement instanceof HTMLSelectElement) {
+                    // clear the list
                     var len = this.htmlElement.length;
                     for (var i = len - 1; i >= 0; i--) {
                         this.htmlElement.remove(i);
@@ -3235,7 +4644,8 @@ class NoControlMagicDirective extends MagicDirective {
                         let child = tabControl.children[i];
                         const layer = child.getAttribute('layer') - 1;
                         if (child instanceof HTMLButtonElement) {
-                            if (layer == command.obj1) {
+                            // set button style
+                            if (layer == command.obj1) { // compare int to string
                                 child.classList.add('tab_button_active');
                             }
                             else {
@@ -3243,6 +4653,7 @@ class NoControlMagicDirective extends MagicDirective {
                             }
                         }
                         else {
+                            // not a buton - hide unselected tabpages
                             let style = (layer == command.obj1) ? 'display: inline' : 'display: none';
                             child.setAttribute('style', style);
                         }
@@ -3263,24 +4674,31 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
-    static ɵ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(i2$1.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: [i0.ɵɵInputFlags.None, "magicnc", "magic"] }, features: [i0.ɵɵInheritDefinitionFeature] });
+    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: [0, "magicnc", "magic"] }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NoControlMagicDirective, [{
         type: Directive,
         args: [{
-                selector: '[magicnc]'
+                selector: '[magicnc]',
+                standalone: false
             }]
-    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.Platform }, { type: RowMagicDirective, decorators: [{
+    }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.Platform }, { type: RowMagicDirective, decorators: [{
                 type: Optional
             }] }], { magic: [{
             type: Input,
             args: ['magicnc']
         }] }); })();
 
+/**
+ * @ignore
+ */
 class Constants {
     static DATE_FMT = 'dd/MMM/yyyy';
 }
+/**
+ * @ignore
+ */
 class DateMagicPipe extends DatePipe {
     _task;
     constructor(_task) {
@@ -3293,6 +4711,7 @@ class DateMagicPipe extends DatePipe {
         let mgDateFormatter = new MgDateFormatter();
         if (!isNullOrUndefined(value) && mask !== null) {
             formatStr = mgDateFormatter.ConvertMgDateFormatToAngular(mask);
+            // If control is label control of table, due to query mode, then save the format here.
             if (formatStr != null && this._task.isTableControl(controlId)) {
                 if (this._task.mgInputDateFormat == null)
                     this._task.mgInputDateFormat = formatStr;
@@ -3305,13 +4724,14 @@ class DateMagicPipe extends DatePipe {
             value = "";
         return value;
     }
-    static ɵfac = function DateMagicPipe_Factory(t) { return new (t || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
-    static ɵpipe = i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true });
+    /** @nocollapse */ static ɵfac = function DateMagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateMagicPipe, [{
         type: Pipe,
         args: [{
-                name: 'magicDate'
+                name: 'magicDate',
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }], null); })();
 class MgDateFormatter {
@@ -3373,14 +4793,20 @@ class MgDateFormatter {
             return formatStr.ToString();
         }
         else
-            return "dd-mm-yyyy";
+            return "dd-mm-yyyy"; // return default format.
     }
 }
 
+/**
+ * Perform Magic validation on input controls which hold alphanumeric strings
+ */
 class MgformatMagicDirective {
     magicDir;
     _task;
     datePasteFlag = false;
+    /**
+     * @ignore
+     */
     constructor(magicDir, _task) {
         this.magicDir = magicDir;
         this._task = _task;
@@ -3388,16 +4814,30 @@ class MgformatMagicDirective {
     ngAfterViewInit() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null && this._task.mgInputDateFormat == null) {
+            // get the first date control's format.
             let pic = this._task.GetControlPictureMask(this.magicDir.id);
             if (pic.getAttr() == StorageAttribute.DATE) {
                 this.formatDate(pic);
             }
         }
     }
+    /**
+     * @ignore
+     */
+    /**
+     * This can be used to set pattern
+     * On input, verifies the input matches the required mask
+     */
     onFocusEvent($event) {
         this.calculatePattern();
     }
     onPaste(event) {
+        /**
+         * This flag is needed to skip execution of dateMasking() method when user paste date in input control.
+         * This is only needed when "StorageAttribute" is DATE. But to check type of "StorageAttribute", we
+         need to execute getControlMetadata() method. So, to reduce this execution overload we set
+         "datePasteFlag" directly.
+         */
         this.datePasteFlag = true;
     }
     onInputEvent(event) {
@@ -3409,6 +4849,8 @@ class MgformatMagicDirective {
         }
         this.calculatePattern();
     }
+    //This method inserts '/' as a separator while entering date in the textbox.
+    //Example: 10/10/2023
     dateMasking(event) {
         const input = event.target;
         let cursorPos = event.target.selectionStart;
@@ -3561,6 +5003,10 @@ class MgformatMagicDirective {
             input.setSelectionRange(start, end);
         }
     }
+    /**
+     * @ignore
+     */
+    // This can be used to implement uppercase/lower case
     onChangeEvent(event) {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         let attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
@@ -3582,6 +5028,7 @@ class MgformatMagicDirective {
             this.formatDateWithCentury(event.target.value, century, control);
         }
     }
+    /** Format year, if user enters 2 digits instead of 4 digits as per the century given in Magic.ini file */
     formatDateWithCentury(userInput, century, control) {
         const dateFormat = this._task.mgInputDateFormat;
         const separator = userInput.includes('/') ? '/' : "-";
@@ -3739,6 +5186,9 @@ class MgformatMagicDirective {
         const year = Number(dateArray[0]);
         return [day, month, year];
     }
+    /**
+     * @ignore
+     */
     calculatePattern() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null) {
@@ -3757,6 +5207,7 @@ class MgformatMagicDirective {
                         if (control.validator == null)
                             control.setValidators(Validators.maxLength(pic.getMaskLength()));
                         else {
+                            // re-set all validators again
                             if (pic.isFormatExp()) {
                                 control.setValidators(Validators.maxLength(pic.getMaskLength()));
                                 if (isUndefined(this.magicDir.rowId))
@@ -3766,6 +5217,7 @@ class MgformatMagicDirective {
                             else
                                 control.setValidators([control.validator, Validators.maxLength(pic.getMaskLength())]);
                         }
+                        //  control.setValidators(Validators.maxLength(pic.getMaskLength()));
                         control.updateValueAndValidity();
                     }
                 }
@@ -3776,6 +5228,9 @@ class MgformatMagicDirective {
         let mgDateFormatter = new MgDateFormatter();
         this._task.mgInputDateFormat = mgDateFormatter.ConvertMgDateFormatToAngular(pic.getMask());
     }
+    /**
+     * @ignore
+     */
     formatAlphaUnicode(control) {
         let value = control.value;
         if (value !== null && value.length > 0) {
@@ -3801,6 +5256,9 @@ class MgformatMagicDirective {
             control.setValue(valueStr.ToString());
         }
     }
+    /**
+     * @ignore
+     */
     formatBoolean(control) {
         let value = control.value;
         if (value !== null && value.length > 0) {
@@ -3813,6 +5271,12 @@ class MgformatMagicDirective {
             }
         }
     }
+    /**
+     * @ignore
+     */
+    /// <summary>
+    /// generate pattern from  fld's  format
+    /// </summary>
     generatePattern(attribute, pic) {
         let pattern = '';
         switch (attribute) {
@@ -3826,6 +5290,12 @@ class MgformatMagicDirective {
         }
         return pattern;
     }
+    /**
+     * @ignore
+     */
+    /// <summary>
+    /// generate pattern for Alpha
+    /// </summary>
     generatePatternForNumber(pic) {
         let patternStr = new StringBuilder();
         patternStr.Append('^');
@@ -3838,6 +5308,9 @@ class MgformatMagicDirective {
         patternStr.Append('$');
         return patternStr.ToString();
     }
+    /**
+     * @ignore
+     */
     isPatternGenerationNeeded(attr, pic) {
         switch (attr) {
             case StorageAttribute.NUMERIC:
@@ -3847,6 +5320,12 @@ class MgformatMagicDirective {
                 return (pic.getMaskChars() > 0) ? true : false;
         }
     }
+    /**
+     * @ignore
+     */
+    /// <summary>
+    /// generate pattern for Alpha
+    /// </summary>
     generatePatternForAlpha(pic) {
         let cnt = 0;
         let inputAllChars = false;
@@ -3855,6 +5334,7 @@ class MgformatMagicDirective {
         let pattern = new StringBuilder();
         pattern.Append('^');
         for (let i = 0; i < mask.length;) {
+            //start new subset , if mask[i] is one of these.
             if (inputAllChars && (mask.charCodeAt(i) == PICInterface.PIC_N || mask.charCodeAt(i) == PICInterface.PIC_U || mask.charCodeAt(i) == PICInterface.PIC_L
                 || mask.charCodeAt(i) == PICInterface.PIC_X)) {
                 pattern.Append('(');
@@ -3900,9 +5380,13 @@ class MgformatMagicDirective {
         pattern.Append('$');
         return pattern.ToString();
     }
+    /**
+     * @ignore
+     */
     getDirectiveCount(mask, idx, pattern, changeInPattern) {
         changeInPattern.value = false;
         let patternCount = 0;
+        // find max chars
         while (idx < mask.length && this.IsPatternMatches(mask.charCodeAt(idx).toString(), pattern)) {
             patternCount++;
             idx++;
@@ -3911,21 +5395,25 @@ class MgformatMagicDirective {
             changeInPattern.value = true;
         return patternCount;
     }
+    /**
+     * @ignore
+     */
     IsPatternMatches(mask, pattern) {
         for (let i = 0; i < pattern.length; i++)
             if (mask == pattern[i])
                 return true;
         return false;
     }
-    static ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirective, selectors: [["", "mgFormat", ""]], hostBindings: function MgformatMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MgformatMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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); })("paste", function MgformatMagicDirective_paste_HostBindingHandler($event) { return ctx.onPaste($event); })("input", function MgformatMagicDirective_input_HostBindingHandler($event) { return ctx.onInputEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); })("blur", function MgformatMagicDirective_blur_HostBindingHandler($event) { return ctx.onBlurEvent($event); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgformatMagicDirective, [{
         type: Directive,
         args: [{
-                selector: '[mgFormat]'
+                selector: '[mgFormat]',
+                standalone: false
             }]
     }], () => [{ type: MagicDirective }, { type: TaskMagicService }], { onFocusEvent: [{
             type: HostListener,
@@ -3944,6 +5432,9 @@ class MgformatMagicDirective {
             args: ['blur', ['$event']]
         }] }); })();
 
+/**
+ * @ignore
+ */
 class TimeMagicPipe extends DatePipe {
     _task;
     constructor(_task) {
@@ -3979,23 +5470,37 @@ class TimeMagicPipe extends DatePipe {
         }
         return value;
     }
-    static ɵfac = function TimeMagicPipe_Factory(t) { return new (t || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
-    static ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true });
+    /** @nocollapse */ static ɵfac = function TimeMagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeMagicPipe, [{
         type: Pipe,
         args: [{
-                name: 'magicTime'
+                name: 'magicTime',
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }], null); })();
 
+/**
+ * Validates the field range.
+ */
 class RangeValidatorMagicDirective {
     _task;
     vcRef;
+    /**
+     *
+     * @param _task The task service
+     * @param vcRef
+     */
     constructor(_task, vcRef) {
         this._task = _task;
         this.vcRef = vcRef;
     }
+    /**
+     * Validation method
+     * @param c FormControl to validate
+     * @returns If validation fails, return error message, else returns null
+     */
     validate(c) {
         let controlName;
         controlName = this.getControlName(c);
@@ -4017,12 +5522,15 @@ class RangeValidatorMagicDirective {
             };
         }
     }
+    /**
+     * @ignore
+     */
     getControlName(c) {
         const formGroup = c.parent.controls;
         return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
     }
-    static ɵfac = function RangeValidatorMagicDirective_Factory(t) { return new (t || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], features: [i0.ɵɵProvidersFeature([
+    /** @nocollapse */ static ɵfac = function RangeValidatorMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALIDATORS,
                     useExisting: RangeValidatorMagicDirective,
@@ -4040,7 +5548,8 @@ class RangeValidatorMagicDirective {
                         useExisting: RangeValidatorMagicDirective,
                         multi: true,
                     }
-                ]
+                ],
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }, { type: i0.ViewContainerRef }], null); })();
 
@@ -4050,26 +5559,48 @@ function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
 } }
+/**
+ * Represents a Magic subform
+ */
 class SubformMagicComponent {
     vcRef;
     mgSub;
+    /**
+      * @ignore
+      */
     id;
+    /**
+     * @ignore
+     */
     set magic(val) { this.id = val; }
     ;
+    /**
+     * @ignore
+     */
     component = null;
+    /**
+     * @ignore
+     */
     constructor(vcRef, mgSub) {
         this.vcRef = vcRef;
         this.mgSub = mgSub;
+        // For angular 13 - find the component from _hostLView
         this.component = (this.vcRef._hostLView).find(v => !isNullOrUndefined(v));
     }
+    /**
+     * @ignore
+     */
     get Component() {
         return this.mgSub.mgGetComp(this.id);
     }
+    /**
+     * @ignore
+     */
     get Parameters() {
         return this.mgSub.mgGetParameters(this.id);
     }
-    static ɵfac = function SubformMagicComponent_Factory(t) { return new (t || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, standalone: false, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SubformMagicComponent_ndc_dynamic_0_Template, 1, 2, "ndc-dynamic", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.Component);
@@ -4085,13 +5616,14 @@ class SubformMagicComponent {
       [ndcDynamicComponent]="Component" 
       [ndcDynamicInputs]="Parameters">
     </ndc-dynamic>
-`
+`,
+                standalone: false
             }]
     }], () => [{ type: i0.ViewContainerRef }, { type: SubformMagicService }], { magic: [{
             type: Input,
             args: ['magic']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src\\ui\\subform.magic.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 22 }); })();
 
 const _c0$1 = ["customContent"];
 const _c1 = ["*"];
@@ -4115,12 +5647,21 @@ function ErrorMagicComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngIf", ctx_r0.defaultDisplay);
 } }
+/**
+ * Represents a Magic subform
+ */
 class ErrorMagicComponent {
     _task;
     mgService;
     changeDetectorRef;
+    /**
+     * @ignore
+     */
     id;
     rowId;
+    /**
+     * @ignore
+     */
     set magic(val) {
         this.id = val;
     }
@@ -4129,18 +5670,26 @@ class ErrorMagicComponent {
         this.rowId = val;
     }
     ;
+    // if true - display standard magic error message, if false - customer has provides his own content and we'll use it
     defaultDisplay = true;
     set CustomContent(innerComponent) {
         this.defaultDisplay = innerComponent == undefined || this.isEmpty(innerComponent.nativeElement);
         this.changeDetectorRef.detectChanges();
     }
     ;
+    /**
+     * @ignore
+     */
     constructor(_task, mgService, changeDetectorRef) {
         this._task = _task;
         this.mgService = mgService;
         this.changeDetectorRef = changeDetectorRef;
         this.rowId = "0";
     }
+    /**
+     * returns true if the html element has no children
+     * @param element
+     */
     isEmpty(element) {
         const nodes = element.childNodes;
         for (let i = 0; i < nodes.length; i++) {
@@ -4151,6 +5700,9 @@ class ErrorMagicComponent {
         }
         return true;
     }
+    /**
+     * @ignore
+     */
     HasErrors(id) {
         if (!isUndefined(id)) {
             let control = this._task.getFormControl(this.rowId, id);
@@ -4171,13 +5723,13 @@ class ErrorMagicComponent {
         }
         return false;
     }
-    static ɵfac = function ErrorMagicComponent_Factory(t) { return new (t || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function ErrorMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
-        } }, inputs: { magic: "magic", rowId1: [i0.ɵɵInputFlags.None, "rowId", "rowId1"] }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""], [4, "ngIf"]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"] }, standalone: false, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""], [4, "ngIf"]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 1);
         } if (rf & 2) {
@@ -4196,7 +5748,8 @@ class ErrorMagicComponent {
       {{mgService.getErrMsg(id, rowId)}} 
     </span>
     </div>
-`
+`,
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }, { type: AccessorMagicService }, { type: i0.ChangeDetectorRef }], { magic: [{
             type: Input,
@@ -4208,8 +5761,11 @@ class ErrorMagicComponent {
             type: ViewChild,
             args: ['customContent', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src\\ui\\mgerror.magic.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 24 }); })();
 
+/**
+ * Directive for checkboxes, to handle the 'change' event
+ */
 class CheckboxMagicDirective {
     magicDirective;
     el;
@@ -4217,11 +5773,17 @@ class CheckboxMagicDirective {
     threeState = false;
     subscribeRefreshDom = null;
     isIndeterminate = false;
+    /**
+     * @ignore
+     */
     constructor(magicDirective, el, task) {
         this.magicDirective = magicDirective;
         this.el = el;
         this.task = task;
     }
+    /**
+     * Handles the Checkbox 'change' event - pass it to the Magic engine
+     */
     onChange($event) {
         if (this.threeState) {
             this.handleThreeState();
@@ -4276,16 +5838,20 @@ class CheckboxMagicDirective {
             checkbox.indeterminate = false;
             value = 'checked';
         }
+        // @ts-ignore
         this.magicDirective.task.onCheckChanged(value, this.magicDirective.id, +this.magicDirective.rowId);
     }
+    /**
+     * Cleanup
+     */
     ngOnDestroy() {
         if (this.subscribeRefreshDom !== null)
             this.subscribeRefreshDom.unsubscribe();
     }
-    static ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function CheckboxMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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); });
-        } }, inputs: { threeState: "threeState" } });
+        } }, inputs: { threeState: "threeState" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
@@ -4293,6 +5859,7 @@ class CheckboxMagicDirective {
                 selector: `
     input[type=checkbox][magic]:not([noFormControl])
 `,
+                standalone: false
             }]
     }], () => [{ type: MagicDirective }, { type: i0.ElementRef }, { type: TaskMagicService }], { threeState: [{
             type: Input
@@ -4301,43 +5868,62 @@ class CheckboxMagicDirective {
             args: ['change', ['$event']]
         }] }); })();
 
+/**
+ * Directive for comboboxes, to handle the 'change' event
+ */
 class ComboboxMagicDirective {
     magicDirective;
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
+        // subcribe to refreshDom. This is a special case for native select HTML control.
+        // to refresh the selected property. Else by default, HTML element doesn't get refreshed as per
+        // selected value and 1st element remains selected.
         this.magicDirective.task.refreshDom.pipe(filter(c => this.magicDirective.IsSameElement(c))).subscribe(value => {
             let command = value;
             if (command.Operation === HtmlProperties.ItemsList)
                 this.onComboboxItemsListChanged();
         });
     }
+    /**
+     * Handles the Combobox 'change' event - pass it to the Magic engine
+     */
     onChange($event) {
         this.magicDirective.task.onComboboxSelectionChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
+    /**
+     * To refresh Combobox selection as per selected property.
+     */
     onComboboxItemsListChanged() {
         this.magicDirective.task.refreshView();
     }
-    static ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: ComboboxMagicDirective, selectors: [["select", "magic", "", 3, "multiple", ""]], hostBindings: function ComboboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function ComboboxMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComboboxMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `select[magic]:not([multiple])`,
+                standalone: false
             }]
     }], () => [{ type: MagicDirective }], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
 
+/**
+ * This service supports custom actions on magic exit
+ */
 class ExitMagicService {
+    /**
+     * Override this method to implement custom logic on magic exit
+     */
     exitMagic() {
         console.log("Magic application terminated");
     }
-    static ɵfac = function ExitMagicService_Factory(t) { return new (t || ExitMagicService)(); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
+    /** @nocollapse */ static ɵfac = function ExitMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExitMagicService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ExitMagicService, factory: ExitMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExitMagicService, [{
         type: Injectable
@@ -4363,6 +5949,9 @@ function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
 function MagicShellComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 9);
 } }
+/**
+ * Root Magic component
+ */
 class MagicShellComponent {
     engineMagicService;
     componentList;
@@ -4374,13 +5963,28 @@ class MagicShellComponent {
     route;
     router;
     exitMagicService;
+    /**
+     * Root component to be displayed in the window
+     */
     RootComponent = null;
+    /**
+     * parameters for the Root Component
+     */
     RootComponentParameters;
     overlayWindowsContainerViewRef;
     rootMagicElementRef;
     SpinnerTemplate;
     showSpinner;
     magicEngineTerminated = false;
+    /**
+     *
+     * @param magic Magic's service
+     * @param componentList Magic component list
+     * @param changeDetectorRef Changes detector
+     * @param titleService Title setting service
+     * @param httpClient The native httpClient instance
+     * @param exitMagicService Magic exit service
+     */
     constructor(engineMagicService, componentList, changeDetectorRef, titleService, overlayWindowService, httpClient, pendingCommandsCollector, route, router, exitMagicService) {
         this.engineMagicService = engineMagicService;
         this.componentList = componentList;
@@ -4395,17 +5999,24 @@ class MagicShellComponent {
         this.initialize();
         this.setTitle();
     }
+    /**
+     * Before-unload event listener
+     * @param event
+     */
     onBeforeUnload(event) {
         if (this.engineMagicService.TransCacheExists()) {
+            // Show the confirmation box before unloading the browser
             event.returnValue = 'Are you sure?';
             return 'Are you sure?';
         }
         else {
+            // terminate the magic server context using fetch API with keep-alive
             this.engineMagicService.TerminateContextUsingFetchAPI();
             this.magicEngineTerminated = true;
         }
     }
     onUnload(event) {
+        // Chrome provides an opportunity to terminate the context after user approves the browser unload alert
         if (!this.magicEngineTerminated)
             this.engineMagicService.TerminateContextUsingFetchAPI();
     }
@@ -4417,6 +6028,7 @@ class MagicShellComponent {
             if (this.router.navigated) {
                 const queryParams = this.route.snapshot.queryParams;
                 const queryParamsMap = new Map();
+                // Iterate over the queryParams object and populate the Map
                 for (const key in queryParams) {
                     if (queryParams.hasOwnProperty(key)) {
                         queryParamsMap.set(key, queryParams[key].toString());
@@ -4430,13 +6042,26 @@ class MagicShellComponent {
     setViewContainerRef(vcRef) {
         this.overlayWindowsContainerViewRef = vcRef;
     }
+    /**
+     * Initialization of Magic mechanisms
+     */
     initialize() {
         this.registerUICommands();
     }
+    /**
+     * Set the title
+     */
     setTitle() {
         const newTitle = this.componentList.title;
         this.titleService.setTitle(newTitle);
     }
+    /**
+     * Set the component according to requested form
+     * @param formName Name of the form to open
+     * @param taskId Id of opening task
+     * @param taskDescription TODO
+     * @param isModal whether modal window is being opened
+     */
     setComponent(formName, taskId, taskDescription, isModal) {
         this.pendingCommandsCollector.startCollecting();
         if (isModal) {
@@ -4448,6 +6073,9 @@ class MagicShellComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
+    /**
+     * @ignore
+     */
     registerUICommands() {
         this.engineMagicService.refreshDom.pipe(filter(command => command.TaskTag === '0'))
             .subscribe(command => {
@@ -4459,6 +6087,10 @@ class MagicShellComponent {
             GuiInteractiveExecutor.executeInteractiveCommand(null, command, this.overlayWindowService);
         });
     }
+    /**
+     * Execute commands received from the Magic WebClient engine
+     * @param command
+     */
     executeCommand(command) {
         switch (command.CommandType) {
             case CommandType.OPEN_FORM:
@@ -4473,7 +6105,7 @@ class MagicShellComponent {
                     this.RootComponentParameters = {};
                     this.changeDetectorRef.detectChanges();
                 }
-                else {
+                else { // Close modal window
                     this.overlayWindowService.close(command.str);
                     this.changeDetectorRef.detectChanges();
                 }
@@ -4496,15 +6128,17 @@ class MagicShellComponent {
                 break;
         }
     }
-    static ɵ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(i1$2.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MagicShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicShellComponent)(i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.Title), i0.ɵɵdirectiveInject(OverlayWindowService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
         } }, hostBindings: function MagicShellComponent_HostBindings(rf, ctx) { 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([])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["class", "spinner-background", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { SpinnerTemplate: "SpinnerTemplate" }, standalone: false, features: [i0.ɵɵProvidersFeature([
+            // ExitMagicService
+            ])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["class", "spinner-background", 4, "ngIf"], [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", 3);
             i0.ɵɵelement(3, "div", 4, 1);
@@ -4519,7 +6153,9 @@ class MagicShellComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
-        args: [{ selector: 'magic-root', providers: [], template: `
+        args: [{ selector: 'magic-root', providers: [
+                // ExitMagicService
+                ], template: `
     <div #magicRoot>
       <ndc-dynamic
         *ngIf = "RootComponent !== null"
@@ -4538,7 +6174,7 @@ class MagicShellComponent {
     <ng-template #defaultSpinner>
       <div class="mgSpinnerClass"></div>
     </ng-template>
-  `, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+  `, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], () => [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ExitMagicService, decorators: [{
                 type: Optional
             }] }], { rootMagicElementRef: [{
@@ -4553,18 +6189,24 @@ class MagicShellComponent {
             type: HostListener,
             args: ['window:unload', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src\\ui\\magic-root.component.ts", lineNumber: 85 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 86 }); })();
 
+/**
+ * @ignore
+ */
 const CHECKBOX_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MagicCheckboxControlValueAccessor),
     multi: true,
 };
+/**
+ * Value accessor for Checkbox without a FormControl
+ */
 class MagicCheckboxControlValueAccessor extends CheckboxControlValueAccessor {
-    static ɵfac = (() => { let ɵMagicCheckboxControlValueAccessor_BaseFactory; return function MagicCheckboxControlValueAccessor_Factory(t) { return (ɵMagicCheckboxControlValueAccessor_BaseFactory || (ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor)))(t || MagicCheckboxControlValueAccessor); }; })();
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicCheckboxControlValueAccessor_BaseFactory; return function MagicCheckboxControlValueAccessor_Factory(__ngFactoryType__) { return (ɵMagicCheckboxControlValueAccessor_BaseFactory || (ɵMagicCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicCheckboxControlValueAccessor)))(__ngFactoryType__ || MagicCheckboxControlValueAccessor); }; })();
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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] });
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature([CHECKBOX_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicCheckboxControlValueAccessor, [{
         type: Directive,
@@ -4575,20 +6217,27 @@ class MagicCheckboxControlValueAccessor extends CheckboxControlValueAccessor {
       input[type=checkbox][magic]:not([ngModel])
     `,
                 host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
-                providers: [CHECKBOX_VALUE_ACCESSOR]
+                providers: [CHECKBOX_VALUE_ACCESSOR],
+                standalone: false
             }]
     }], null, null); })();
 
+/**
+ * @ignore
+ */
 const MAGIC_DEFAULT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MagicDefaultValueAccessor),
     multi: true
 };
+/**
+ * @ignore
+ */
 class MagicDefaultValueAccessor extends DefaultValueAccessor {
-    static ɵfac = (() => { let ɵMagicDefaultValueAccessor_BaseFactory; return function MagicDefaultValueAccessor_Factory(t) { return (ɵMagicDefaultValueAccessor_BaseFactory || (ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor)))(t || MagicDefaultValueAccessor); }; })();
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicDefaultValueAccessor_BaseFactory; return function MagicDefaultValueAccessor_Factory(__ngFactoryType__) { return (ɵMagicDefaultValueAccessor_BaseFactory || (ɵMagicDefaultValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(MagicDefaultValueAccessor)))(__ngFactoryType__ || MagicDefaultValueAccessor); }; })();
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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] });
+        } }, exportAs: ["magic"], standalone: false, features: [i0.ɵɵProvidersFeature([MAGIC_DEFAULT_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDefaultValueAccessor, [{
         type: Directive,
@@ -4604,22 +6253,29 @@ class MagicDefaultValueAccessor extends DefaultValueAccessor {
                     '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
                 },
                 providers: [MAGIC_DEFAULT_VALUE_ACCESSOR],
-                exportAs: 'magic'
+                exportAs: 'magic',
+                standalone: false
             }]
     }], null, null); })();
 
+/**
+ * Directive for checkboxes which should not have a form control
+ */
 class CheckboxNoFormControlMagicDirective {
     magicDirective;
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
+    /**
+     * Handle the 'Checkbox' change event - pass it to the Magic engine
+     */
     onChange($event) {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
-    static ɵfac = function CheckboxNoFormControlMagicDirective_Factory(t) { return new (t || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: CheckboxNoFormControlMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", "noFormControl", ""]], hostBindings: function CheckboxNoFormControlMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function CheckboxNoFormControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxNoFormControlMagicDirective, [{
         type: Directive,
@@ -4627,30 +6283,38 @@ class CheckboxNoFormControlMagicDirective {
                 selector: `
     input[type=checkbox][magic]:([noFormControl])   
     `,
+                standalone: false
             }]
     }], () => [{ type: MagicDirective }], { onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();
 
+/**
+ * Directive for non-checkbox input controls which do not have a form control
+ */
 class InputNoFormControlMagicDirective {
     magicDirective;
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
+    /**
+     * Handles the 'change' event - pass it to the Magic engine
+     */
     onChange($event) {
         this.magicDirective.task.setInputTextValue(this.magicDirective.id, this.magicDirective.rowId, event.srcElement.value);
     }
-    static ɵfac = function InputNoFormControlMagicDirective_Factory(t) { return new (t || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
-    static ɵ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) {
+    /** @nocollapse */ static ɵfac = function InputNoFormControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNoFormControlMagicDirective, [{
         type: Directive,
         args: [{
                 selector: `input[magic]:([noFormControl]):not([type=checkbox]),
-             textarea[magic]:([noFormControl]):not([type=checkbox])`
+             textarea[magic]:([noFormControl]):not([type=checkbox])`,
+                standalone: false
             }]
     }], () => [{ type: MagicDirective }], { onChange: [{
             type: HostListener,
@@ -4662,6 +6326,14 @@ const DATE_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => DateValueAccessor),
     multi: true
 };
+/**
+ * The accessor for writing a value and listening to changes on a date input element
+ *
+ *  ### Example
+ *  `<input type="date" name="birthday" ngModel dateInput>`
+ *  OR
+ *  `<input type="date" formControlName="birthday" dateInput>`
+ */
 class DateValueAccessor {
     renderer;
     elementRef;
@@ -4680,6 +6352,7 @@ class DateValueAccessor {
         this.magicDir = magicDir;
         this._task = _task;
     }
+    /** Format year, if user enters 2 digits instead of 4 digits as per the century given in Magic.ini file */
     formatDateWithCentury(userInput, century, control) {
         const separator = userInput.includes('/') ? '/' : "-";
         let centuryVal = parseInt(century.toString().slice(0, 2));
@@ -4694,6 +6367,7 @@ class DateValueAccessor {
                 year;
         control.setValue(new Date(`${updatedYear}${separator}${month}${separator}${day}`));
     }
+    /** Writes a new value to the element (model -> view) */
     writeValue(value) {
         if (!value) {
             this.renderer.setProperty(this.elementRef.nativeElement, "value", null);
@@ -4701,27 +6375,31 @@ class DateValueAccessor {
         }
         this.renderer.setProperty(this.elementRef.nativeElement, "valueAsDate", new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())));
     }
+    /** Registers a callback function, called when value changes (view -> model) */
     registerOnChange(fn) {
         this.onChange = v => fn(v instanceof Date
             ? new Date(v.getUTCFullYear(), v.getUTCMonth(), v.getUTCDate())
             : v);
     }
+    /** Registers a callback function, called when the control is blurred */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** Enables or disables the element when the control status changes */
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
-    static ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, selectors: [["", "dateInput", ""]], hostBindings: function DateValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function DateValueAccessor_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ 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($event) { return ctx.onBlurEvent($event); });
-        } }, features: [i0.ɵɵProvidersFeature([DATE_VALUE_ACCESSOR])] });
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature([DATE_VALUE_ACCESSOR])] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateValueAccessor, [{
         type: Directive,
         args: [{
                 selector: "[dateInput]",
-                providers: [DATE_VALUE_ACCESSOR]
+                providers: [DATE_VALUE_ACCESSOR],
+                standalone: false
             }]
     }], () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: MagicDirective }, { type: TaskMagicService }], { onChange: [{
             type: HostListener,
@@ -4734,6 +6412,9 @@ class DateValueAccessor {
             args: ['blur', ['$event']]
         }] }); })();
 
+/**
+ * Responsible for connecting HTML elements to the Magic WebClient engine showing it is not Magic Control but a Dummy control which is used to notify only receeive focus event for now
+ */
 class NonMagicControlDirective {
     _task;
     element;
@@ -4744,13 +6425,38 @@ class NonMagicControlDirective {
         this.selector = 'NonMagicControl';
     }
     ;
+    /**
+     * The HTML element connected to this directive
+     */
     htmlElement;
+    /**
+     * Magic's component handling this control
+     */
     component;
+    /**
+     * Collection of event handlers for this element
+     */
     eventHandlers = {};
+    /**
+     * Id of this element
+     */
     id;
+    /**
+     * @ignore
+     */
     selector;
+    /**
+     * @ignore
+     */
     subscribeRefreshDom;
     eventsOnlyVal = false;
+    /**
+     *
+     * @param _task The task service
+     * @param element The element for which the directive is applied
+     * @param renderer Renderer for the element
+     * @param vcRef
+     */
     constructor(_task, element, renderer, vcRef) {
         this._task = _task;
         this.element = element;
@@ -4758,29 +6464,44 @@ class NonMagicControlDirective {
         this.vcRef = vcRef;
         this.htmlElement = this.element.nativeElement;
     }
+    /**
+     * Get the task service
+     * @returns
+     */
     get task() {
         return this._task;
     }
+    /**
+     * Register to the events this element may need to handle
+     */
     regEvents() {
+        // Handle events for which event handler may be removed and restored
         this.eventHandlers['focusin'] = this.OnFocus.bind(this);
         Object.keys(this.eventHandlers).forEach((key) => {
             this.renderer.listen(this.htmlElement, key, this.eventHandlers[key]);
         });
     }
+    /**
+     * Handle focus event
+     */
     OnFocus() {
         this.task.insertEvent(getGuiEventObj('focusOnNonMagicControl', '', -1));
         event.cancelBubble = true;
     }
+    /**
+     * Initialize this object
+     */
     ngOnInit() {
         this.regEvents();
     }
-    static ɵfac = function NonMagicControlDirective_Factory(t) { return new (t || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: [i0.ɵɵInputFlags.None, "NonMagicControl", "magic"] } });
+    /** @nocollapse */ static ɵfac = function NonMagicControlDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: [0, "NonMagicControl", "magic"] }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NonMagicControlDirective, [{
         type: Directive,
         args: [{
-                selector: '[NonMagicControl]'
+                selector: '[NonMagicControl]',
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], { magic: [{
             type: Input,
@@ -4808,16 +6529,20 @@ class Time24MagicPipe {
         }
         return value;
     }
-    static ɵfac = function Time24MagicPipe_Factory(t) { return new (t || Time24MagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
-    static ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime24", type: Time24MagicPipe, pure: true });
+    /** @nocollapse */ static ɵfac = function Time24MagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Time24MagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime24", type: Time24MagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Time24MagicPipe, [{
         type: Pipe,
         args: [{
-                name: 'magicTime24'
+                name: 'magicTime24',
+                standalone: false
             }]
     }], () => [{ type: TaskMagicService }], null); })();
 
+/**
+ * @ignore
+ */
 const decs = [
     MagicDirective,
     CheckboxMagicDirective,
@@ -4849,30 +6574,33 @@ const decs = [
     MagicViewContainerRef,
     Time24MagicPipe
 ];
+/**
+ * @ignore
+ */
 class MagicModule {
-    static ɵfac = function MagicModule_Factory(t) { return new (t || MagicModule)(); };
-    static ɵmod = i0.ɵɵdefineNgModule({ type: MagicModule });
-    static ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [CommonModule,
+    /** @nocollapse */ static ɵfac = function MagicModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicModule)(); };
+    /** @nocollapse */ static ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: MagicModule });
+    /** @nocollapse */ static ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
             DynamicModule,
-            HttpClientModule, MaskitoModule] });
+            DragDropModule, MaskitoModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
         args: [{
                 declarations: [...decs],
                 exports: [...decs, MaskitoModule],
-                imports: [
-                    CommonModule,
+                imports: [CommonModule,
                     FormsModule,
                     ReactiveFormsModule,
                     RouterModule,
                     DynamicModule,
-                    HttpClientModule
-                ],
-                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider]
+                    CdkDragHandle,
+                    CdkDrag,
+                    DragDropModule],
+                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withInterceptorsFromDi())]
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
@@ -4908,7 +6636,9 @@ class MagicModule {
         ReactiveFormsModule,
         RouterModule,
         DynamicModule,
-        HttpClientModule], exports: [MagicDirective,
+        CdkDragHandle,
+        CdkDrag,
+        DragDropModule], exports: [MagicDirective,
         CheckboxMagicDirective,
         CheckboxNoFormControlMagicDirective,
         InputNoFormControlMagicDirective,
@@ -5023,15 +6753,15 @@ class MgDateAdapter extends NativeDateAdapter {
             this.mgdtfmt = this.task.mgInputDateFormat;
         if (displayFormat === 'input') {
             if (this.mgdtfmt == null)
-                this.mgdtfmt = 'M/d/yyyy';
+                this.mgdtfmt = 'M/d/yyyy'; //default format
             return formatDate(date, this.mgdtfmt, this.locale);
         }
         else {
             return date.toDateString();
         }
     }
-    static ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MAT_DATE_LOCALE)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
+    /** @nocollapse */ static ɵfac = function MgDateAdapter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MgDateAdapter)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MAT_DATE_LOCALE)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgDateAdapter, [{
         type: Injectable
@@ -5044,6 +6774,9 @@ const matDateProviders = [
     { provide: DateAdapter, useClass: MgDateAdapter },
     { provide: MAT_DATE_FORMATS, useValue: MG_FORMATS }
 ];
+/**
+ * Magic service providers
+ */
 const basicMagicProviders = [
     MagicServices,
     TaskMagicService,
@@ -5057,7 +6790,16 @@ const magicProviders = [
     TableMagicService
 ];
 
+/**
+ * @ignore
+ */
+///////////////////////////////////////////////////////////
+// class to hold gui-related helper methods
+///////////////////////////////////////////////////////////
 class utils {
+    ///////////////////////////////////////////////////////////
+    // Calculate the distance between the control and the supplied x,y coordinates
+    ///////////////////////////////////////////////////////////
     static getDistance(control, x, y) {
         let left = control.clientLeft, top = control.clientTop;
         let dx, dy;
@@ -5084,6 +6826,9 @@ class utils {
         const ret = (dx * dx + dy * dy);
         return ret;
     }
+    ///////////////////////////////////////////////////////////
+    //
+    ///////////////////////////////////////////////////////////
     static getDimentions(el) {
         let xPos = 0;
         let yPos = 0;
@@ -5091,12 +6836,14 @@ class utils {
         let height = el.height;
         while (el) {
             if (el.tagName == "BODY") {
+                // deal with browser quirks with body/window/document and page scroll
                 let xScroll = el.scrollLeft || document.documentElement.scrollLeft;
                 let yScroll = el.scrollTop || document.documentElement.scrollTop;
                 xPos += (el.offsetLeft - xScroll + el.clientLeft);
                 yPos += (el.offsetTop - yScroll + el.clientTop);
             }
             else {
+                // for all other non-BODY elements
                 xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
                 yPos += (el.offsetTop - el.scrollTop + el.clientTop);
             }
@@ -5111,11 +6858,22 @@ class utils {
     }
 }
 
+/**
+ * @ignore
+ */
 class ModalFormDefinition {
     taskId = "";
     comp = null;
     parameters = {};
 }
 
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
 export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
 //# sourceMappingURL=magic-xpa-angular.mjs.map