@magic-xpa/angular 4.800.0-dev480.94 → 4.801.0-dev481.221

package/fesm2015/magic-xpa-angular.js

@@ -1,5 +1,5 @@
 import { isNullOrUndefined, isUndefined } from 'util';
-import { ɵɵdefineInjectable, ɵsetClassMetadata, Injectable, Input, Output, ɵɵdirectiveInject, ViewContainerRef, ComponentFactoryResolver, ɵɵdefineDirective, Directive, ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵtext, ɵɵelementEnd, ɵɵadvance, ɵɵtextInterpolate1, EventEmitter, Injector, ɵɵdefineComponent, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵelement, ɵɵproperty, Component, ViewChild, ElementRef, NgModuleFactoryLoader, ChangeDetectorRef, ɵɵstaticViewQuery, ɵɵgetInheritedFactory, ɵɵinject, ɵɵProvidersFeature, HostListener, Renderer2, Optional, ɵɵdefinePipe, Pipe, ɵɵprojection, ɵɵprojectionDef, ɵɵelementContainer, ɵɵreference, ɵɵresolveWindow, ɵɵtemplateRefExtractor, forwardRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, ɵsetClassMetadata, Injectable, ɵɵinject, NgModuleFactoryLoader, Injector, ɵɵdirectiveInject, ComponentFactoryResolver, ViewContainerRef, ɵɵdefineComponent, Component, Input, Output, ɵɵdefineDirective, Directive, ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵtext, ɵɵelementEnd, ɵɵadvance, ɵɵtextInterpolate1, EventEmitter, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵelement, ɵɵproperty, ViewChild, ElementRef, ChangeDetectorRef, ɵɵstaticViewQuery, ɵɵgetInheritedFactory, ɵɵProvidersFeature, HostListener, Renderer2, Optional, ɵɵdefinePipe, Pipe, ɵɵprojection, ɵɵprojectionDef, ɵɵelementContainer, ɵɵreference, ɵɵresolveWindow, ɵɵtemplateRefExtractor, forwardRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
 import { NgIf, NgStyle, DatePipe, NgTemplateOutlet, CommonModule, formatDate } from '@angular/common';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -8,9 +8,9 @@ import { __awaiter, __decorate, __metadata } from 'tslib';
 import { Subject } from 'rxjs';
 import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
 import { InteractiveCommandType, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
-import { MagicProperties, StorageAttribute, Logger, BindingLevel, StorageAttributeType, StrUtil, PICInterface } from '@magic-xpa/utils';
+import { MagicProperties, Logger, StrUtil, StorageAttribute, BindingLevel, StorageAttributeType, PICInterface } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
-import { NString, StringBuilder, List, RefParam } from '@magic-xpa/mscorelib';
+import { NString, List, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import { Title } from '@angular/platform-browser';
 import { fromEvent } from 'rxjs/internal/observable/fromEvent';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
@@ -335,6 +335,324 @@ StylesMapManager.MagicPropertyToHtmlAttributeMap = new Map([
     [MagicProperties.Wallpaper, "background-image"]
 ]);
 
+class CommandsCollectorMagicService {
+    constructor(magic) {
+        this.magic = magic;
+        this.count = 0;
+        this.commands = new List();
+        this.subscription = null;
+    }
+    startCollecting() {
+        this.count++;
+        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
+        if (this.subscription === null) {
+            this.subscription = this.magic.refreshDom
+                .subscribe(command => {
+                this.commands.push(command);
+            });
+        }
+    }
+    stopCollecting() {
+        this.count--;
+        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
+        if (this.count === 0) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+    GetCommands(taskId) {
+        const commands = this.commands.filter((command) => command.TaskTag === taskId);
+        commands.forEach(command => { this.commands.Remove(command); });
+        return commands;
+    }
+}
+CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(ɵɵinject(EngineMagicService)); };
+CommandsCollectorMagicService.ɵprov = ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
+(function () { ɵsetClassMetadata(CommandsCollectorMagicService, [{
+        type: Injectable
+    }], function () { return [{ type: EngineMagicService }]; }, null); })();
+
+class RouteCommand {
+}
+class RouterCommandsMagicService {
+    constructor() {
+        this.pendingRouteCommands = [];
+    }
+    AddRouteCommand(routeCommand) {
+        this.pendingRouteCommands.push(routeCommand);
+    }
+    ExecuteNextCommand() {
+        let pendingRouteCommand = this.pendingRouteCommands.shift();
+        if (!isNullOrUndefined(pendingRouteCommand)) {
+            pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
+        }
+    }
+}
+RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
+RouterCommandsMagicService.ɵprov = ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
+(function () { ɵsetClassMetadata(RouterCommandsMagicService, [{
+        type: Injectable
+    }], null, null); })();
+
+class SubformMagicService {
+    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector) {
+        this.task = task;
+        this.activatedRoute = activatedRoute;
+        this.componentList = componentList;
+        this.pendingCommandsCollector = pendingCommandsCollector;
+        this.router = router;
+        this.routerCommandsMagicService = routerCommandsMagicService;
+        this.componentListMagicService = componentListMagicService;
+        this.loader = loader;
+        this.injector = injector;
+        this.subformsDict = {};
+        this.routesDict = {};
+        this.currentRouteDefinition = null;
+    }
+    mgGetComp(subformName) {
+        if (subformName in this.subformsDict) {
+            let formName = this.subformsDict[subformName].formName;
+            if (formName)
+                return this.componentList.getComponent(formName);
+        }
+        return null;
+    }
+    mgGetParameters(subformName) {
+        if (subformName in this.subformsDict) {
+            return this.subformsDict[subformName].parameters;
+        }
+        else
+            return "";
+    }
+    deleteSubformComp(subformControlName, formName) {
+        if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+            if (this.subformsDict[subformControlName].formName === formName) {
+                this.subformsDict[subformControlName] = {};
+                this.task.refreshView();
+            }
+        }
+    }
+    addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
+        this.pendingCommandsCollector.startCollecting();
+        let refreshNeeded = false;
+        if (isNullOrUndefined(routerPath)) {
+            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
+                if (this.subformsDict[subformControlName].formName === formName) {
+                    this.subformsDict[subformControlName] = {};
+                    this.task.refreshView();
+                }
+            }
+            let moduleRef = this.componentListMagicService.getModuleRef(formName);
+            if (moduleRef == null) {
+                let lazyLoadModule = this.componentListMagicService.getLazyLoadModuleData(formName);
+                if (lazyLoadModule != null) {
+                    this.loader
+                        .load(lazyLoadModule.modulePath + "#" + lazyLoadModule.moduleName)
+                        .then((moduleFactory) => {
+                        moduleRef = moduleFactory.create(this.injector);
+                        this.subformsDict[subformControlName] = {
+                            formName,
+                            parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                        };
+                        this.task.refreshView();
+                    });
+                }
+            }
+            else {
+                this.subformsDict[subformControlName] = {
+                    formName,
+                    parameters: { taskIdParam: taskId, taskDescription: taskDescription }
+                };
+                refreshNeeded = true;
+            }
+        }
+        else {
+            if (inDefaultOutlet)
+                subformControlName = "primary";
+            let routeParams = new List();
+            routeParams.push(routerPath);
+            if (params !== null) {
+                routeParams = routeParams.concat(params);
+            }
+            let routeCommand = {
+                callerMgSubformServiceRef: this,
+                routerOutletName: subformControlName,
+                formName: formName,
+                parameters: { taskIdParam: taskId, taskDescription: taskDescription },
+                routeParams: routeParams
+            };
+            if (SubformMagicService.currentCallerMgSubformServiceRef === null)
+                this.ExecuteRouteCommand(routeCommand);
+            else
+                this.routerCommandsMagicService.AddRouteCommand(routeCommand);
+        }
+        if (refreshNeeded)
+            this.task.refreshView();
+    }
+    ExecuteRouteCommand(routeCommand) {
+        let reusingComponent = false;
+        let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
+        let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
+        if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
+            currentSubformMagicService.router.navigate([{ outlets: { [routeCommand.routerOutletName]: null } }], { relativeTo: relativeRoute })
+                .then((result) => {
+                SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
+                currentSubformMagicService.currentRouteDefinition = {
+                    formName: routeCommand.formName,
+                    parameters: routeCommand.parameters
+                };
+                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
+            });
+        }
+        else {
+            SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
+            currentSubformMagicService.currentRouteDefinition = {
+                formName: routeCommand.formName,
+                parameters: routeCommand.parameters
+            };
+            if (SubformMagicService.routerContainers.length > 0) {
+                let routeContainer = SubformMagicService.routerContainers[0];
+                SubformMagicService.routerContainers.shift();
+                routeContainer.initializeComponent();
+            }
+            else {
+                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
+            }
+        }
+    }
+    PerformRouterNavigate(routerOutletName, routeParams) {
+        let relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+        this.router.navigate([{ outlets: { [routerOutletName]: routeParams } }], { relativeTo: relativeRoute })
+            .then((result) => {
+            if (result !== null && !result) {
+                let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+                subformMagicService.currentRouteDefinition = null;
+                SubformMagicService.currentCallerMgSubformServiceRef = null;
+                subformMagicService.pendingCommandsCollector.stopCollecting();
+                subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
+            }
+        });
+    }
+    init() {
+        const pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
+        if (pendingCommands.length > 0) {
+            pendingCommands.forEach(command => { this.task.executeCommand(command); });
+            this.task.refreshView();
+        }
+        this.pendingCommandsCollector.stopCollecting();
+    }
+    refreshView() {
+        this.task.refreshView();
+    }
+    static getRelativeRoute(sendActivatedRoute) {
+        let currentActiveRoute = sendActivatedRoute;
+        if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
+            currentActiveRoute = currentActiveRoute.parent;
+            if (!currentActiveRoute.snapshot.routeConfig.loadChildren)
+                console.log("getRelativeRoute(): both path and currentActiveRoute.snapshot.routeConfig.loadChildren are empty.");
+        }
+        return currentActiveRoute;
+    }
+}
+SubformMagicService.currentCallerMgSubformServiceRef = null;
+SubformMagicService.routerContainers = new Array();
+SubformMagicService.ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(ɵɵinject(TaskMagicService), ɵɵinject(ActivatedRoute), ɵɵinject(ComponentListMagicService), ɵɵinject(CommandsCollectorMagicService), ɵɵinject(Router), ɵɵinject(RouterCommandsMagicService), ɵɵinject(ComponentListMagicService), ɵɵinject(NgModuleFactoryLoader), ɵɵinject(Injector)); };
+SubformMagicService.ɵprov = ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
+(function () { ɵsetClassMetadata(SubformMagicService, [{
+        type: Injectable
+    }], function () { return [{ type: TaskMagicService }, { type: ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: NgModuleFactoryLoader }, { type: Injector }]; }, null); })();
+
+class RouterContainerMagicComponent {
+    constructor(activatedRoute, router, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.magic = magic;
+        this.containerTaskService = containerTaskService;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.componentList = componentList;
+        this.pendingCommandsCollector = pendingCommandsCollector;
+        this.routerCommandsMagicService = routerCommandsMagicService;
+        this.componentRef = null;
+        this.parentMgSubformService = null;
+    }
+    static get LastRoute() {
+        return RouterContainerMagicComponent.lastRoute;
+    }
+    ngOnInit() {
+        let outletname = this.activatedRoute.outlet;
+        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+        let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+        RouterContainerMagicComponent.lastRoute = this.router.url;
+        if (subformMagicService == null || subformMagicService.currentRouteDefinition === null) {
+            this.insertRouteEvent(currentActiveRoute);
+            SubformMagicService.routerContainers.push(this);
+        }
+        else {
+            this.initializeComponent();
+        }
+    }
+    insertRouteEvent(currentActiveRoute) {
+        let guiEvent = getGuiEventObj('RouterNavigate', null, 0);
+        guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
+        if (currentActiveRoute.snapshot.outlet !== 'primary')
+            guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
+        let calcRouterPath = currentActiveRoute.routeConfig.path;
+        if (calcRouterPath.length > 0) {
+            let routerPath = calcRouterPath;
+            let tokens = StrUtil.tokenize(routerPath, "/:");
+            guiEvent.RouterPath = tokens[0];
+            guiEvent.RouterParams = new List();
+            for (let i = 1; i < tokens.length; i++) {
+                guiEvent.RouterParams.push(this.activatedRoute.snapshot.params[tokens[i]]);
+            }
+        }
+        this.containerTaskService.insertEvent(guiEvent);
+    }
+    initializeComponent() {
+        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
+        if (subformMagicService.currentRouteDefinition !== null) {
+            let comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
+            this.componentRef = this.viewContainerRef.createComponent(componentFactory);
+            Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
+            let myActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+            let routeParams = StrUtil.tokenize(myActiveRoute.snapshot.routeConfig.path, "/:");
+            subformMagicService.routesDict[myActiveRoute.snapshot.outlet] = routeParams[0];
+            this.parentMgSubformService = subformMagicService;
+            subformMagicService.currentRouteDefinition = null;
+            SubformMagicService.currentCallerMgSubformServiceRef = null;
+            let ignoreParamChange = true;
+            myActiveRoute.paramMap.subscribe(params => {
+                if (!ignoreParamChange)
+                    this.insertRouteEvent(myActiveRoute);
+                ignoreParamChange = false;
+            });
+            this.parentMgSubformService.refreshView();
+            this.routerCommandsMagicService.ExecuteNextCommand();
+        }
+    }
+    ngOnDestroy() {
+        if (this.componentRef != null) {
+            this.componentRef.instance.task.close();
+            let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
+            this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
+            RouterContainerMagicComponent.lastRoute = this.router.url;
+        }
+    }
+}
+RouterContainerMagicComponent.lastRoute = "/";
+RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(ɵɵdirectiveInject(ActivatedRoute), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(EngineMagicService), ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(CommandsCollectorMagicService), ɵɵdirectiveInject(RouterCommandsMagicService)); };
+RouterContainerMagicComponent.ɵcmp = ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+(function () { ɵsetClassMetadata(RouterContainerMagicComponent, [{
+        type: Component,
+        args: [{
+                selector: 'magic-route-outlet',
+                template: `
+  `
+            }]
+    }], function () { return [{ type: ActivatedRoute }, { type: Router }, { type: EngineMagicService }, { type: TaskMagicService }, { type: ComponentFactoryResolver }, { type: ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null); })();
+
 class GuiInteractiveExecutor {
     Run() {
         try {
@@ -363,6 +681,9 @@ class GuiInteractiveExecutor {
                 case InteractiveCommandType.REFRESH_PAGE:
                     this.OnRefreshPage();
                     break;
+                case InteractiveCommandType.GET_LAST_ROUTE:
+                    this.OnGetLastRoute();
+                    break;
             }
         }
         catch (ex) {
@@ -422,6 +743,9 @@ class GuiInteractiveExecutor {
         else
             this.command._boolVal = this.task.Records.list[guiRowIndex].isEditing;
     }
+    OnGetLastRoute() {
+        this.command.resultString = RouterContainerMagicComponent.LastRoute;
+    }
 }
 
 let BaseMagicOverlayContainer = class BaseMagicOverlayContainer {
@@ -1530,6 +1854,7 @@ class TaskMagicService {
                             control.setValidators([control.validator, this.customValidator(guiRowId.toString(), controlId)]);
                         else
                             control.setValidators(this.customValidator(guiRowId.toString(), controlId));
+                        control.updateValueAndValidity();
                     }
                 }
                 break;
@@ -1542,7 +1867,7 @@ class TaskMagicService {
                 properties.setStyle(command.Operation, command.obj1);
                 break;
             case CommandType.SET_ATTRIBUTE:
-                properties = this.Records.list[guiRowId].getControlMetadata(controlId);
+                properties = this.Records.list[0].getControlMetadata(controlId);
                 properties.dataType = String.fromCharCode(command.number);
                 break;
             case CommandType.SET_VALUE:
@@ -1703,320 +2028,114 @@ class TaskMagicService {
     onComboboxSelectionChanged(event, idx, line) {
         let guiEvent = getGuiEventObj('selectionchanged', idx, line);
         if (typeof (event) == 'number') {
-            guiEvent.Value = event;
-        }
-        else {
-            if (!isNullOrUndefined(event.target)) {
-                let indexes = new Array(event.target.selectedOptions.length);
-                for (let i = 0; i < event.target.selectedOptions.length; i++) {
-                    indexes[i] = event.target.selectedOptions[i].index;
-                }
-                guiEvent.Value = indexes.join(',');
-            }
-            else
-                guiEvent.Value = event.value;
-        }
-        this.insertEvent(guiEvent);
-    }
-    onListBoxSelectionChanged(event, idx) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        let selectedOptions;
-        if (!isNullOrUndefined(event.target))
-            selectedOptions = event.target.selectedOptions;
-        else
-            selectedOptions = event.source.selectedOptions.selected;
-        let length = selectedOptions.length;
-        let indexes = new Array(length);
-        for (let i = 0; i < length; i++) {
-            if (!isNullOrUndefined(event.target))
-                indexes[i] = (selectedOptions[i]).index;
-            else
-                indexes[i] = (selectedOptions[i]).value;
-        }
-        guiEvent.Value = indexes;
-        this.insertEvent(guiEvent);
-    }
-    onCheckChanged(event, idx, rowId) {
-        if (typeof rowId === 'undefined')
-            rowId = 0;
-        let guiEvent = getGuiEventObj('selectionchanged', idx, rowId);
-        if (typeof (event) == 'boolean') {
-            guiEvent.Value = event;
-        }
-        else {
-            if (typeof event.target === 'undefined')
-                guiEvent.Value = (event).checked;
-            else
-                guiEvent.Value = (event.target).checked;
-        }
-        this.insertEvent(guiEvent);
-    }
-    mgOnTabSelectionChanged(idx, layer) {
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        guiEvent.Value = layer.toString();
-        this.insertEvent(guiEvent);
-    }
-    mgOnRadioSelectionChanged(event, idx) {
-        let result = this.getFormControl('0', idx);
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        if (typeof result.value !== 'string')
-            guiEvent.Value = result.value.index;
-        else
-            guiEvent.Value = result.value;
-        this.insertEvent(guiEvent);
-    }
-    close() {
-        this.insertEvent(getGuiEventObj('close', null, 0));
-    }
-    IsStub() {
-        return this.magic.isStub;
-    }
-    saveData(data) {
-        this.magic.saveData(data);
-    }
-    createData() {
-        let myData = {
-            records: this.Records,
-            template: this.template
-        };
-        let text = 'loadData():any   {\n' +
-            '    let stubData = ' + JSON.stringify(myData) + ';\n' +
-            '    this.loadStubData(stubData);}';
-        console.log(text);
-        this.saveData(text);
-    }
-    loadStubData(stubData) {
-        this.Records = stubData.records;
-        this.settemplate(stubData.template);
-        this.taskId = '1';
-        for (let i = 0; i < this.Records.list.length; i++)
-            this.buildTableRowControls(i);
-    }
-    loadData() {
-        alert('Please, overwrite method loadData');
-    }
-    setStubValue(guiRowId, fc, name) {
-        if (this.IsStub()) {
-            try {
-                let val = this.Records.list[guiRowId].values[name];
-                fc.setValue(val);
-            }
-            catch (e) {
-            }
-        }
-    }
-}
-TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(ɵɵinject(EngineMagicService), ɵɵinject(OverlayWindowService)); };
-TaskMagicService.ɵprov = ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
-(function () { ɵsetClassMetadata(TaskMagicService, [{
-        type: Injectable
-    }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
-
-class CommandsCollectorMagicService {
-    constructor(magic) {
-        this.magic = magic;
-        this.count = 0;
-        this.commands = new List();
-        this.subscription = null;
-    }
-    startCollecting() {
-        this.count++;
-        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.startCollecting() --- " + this.count);
-        if (this.subscription === null) {
-            this.subscription = this.magic.refreshDom
-                .subscribe(command => {
-                this.commands.push(command);
-            });
-        }
-    }
-    stopCollecting() {
-        this.count--;
-        Logger.Instance.WriteDevToLog("CommandsCollectorMagicService.stopCollecting() --- " + this.count);
-        if (this.count === 0) {
-            this.subscription.unsubscribe();
-            this.subscription = null;
-        }
-    }
-    GetCommands(taskId) {
-        const commands = this.commands.filter((command) => command.TaskTag === taskId);
-        commands.forEach(command => { this.commands.Remove(command); });
-        return commands;
-    }
-}
-CommandsCollectorMagicService.ɵfac = function CommandsCollectorMagicService_Factory(t) { return new (t || CommandsCollectorMagicService)(ɵɵinject(EngineMagicService)); };
-CommandsCollectorMagicService.ɵprov = ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac });
-(function () { ɵsetClassMetadata(CommandsCollectorMagicService, [{
-        type: Injectable
-    }], function () { return [{ type: EngineMagicService }]; }, null); })();
-
-class RouteCommand {
-}
-class RouterCommandsMagicService {
-    constructor() {
-        this.pendingRouteCommands = [];
-    }
-    AddRouteCommand(routeCommand) {
-        this.pendingRouteCommands.push(routeCommand);
-    }
-    ExecuteNextCommand() {
-        let pendingRouteCommand = this.pendingRouteCommands.shift();
-        if (!isNullOrUndefined(pendingRouteCommand)) {
-            pendingRouteCommand.callerMgSubformServiceRef.ExecuteRouteCommand(pendingRouteCommand);
-        }
-    }
-}
-RouterCommandsMagicService.ɵfac = function RouterCommandsMagicService_Factory(t) { return new (t || RouterCommandsMagicService)(); };
-RouterCommandsMagicService.ɵprov = ɵɵdefineInjectable({ token: RouterCommandsMagicService, factory: RouterCommandsMagicService.ɵfac });
-(function () { ɵsetClassMetadata(RouterCommandsMagicService, [{
-        type: Injectable
-    }], null, null); })();
-
-class SubformMagicService {
-    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService) {
-        this.task = task;
-        this.activatedRoute = activatedRoute;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.router = router;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-        this.subformsDict = {};
-        this.routesDict = {};
-        this.currentRouteDefinition = null;
-    }
-    mgGetComp(subformName) {
-        if (subformName in this.subformsDict) {
-            let formName = this.subformsDict[subformName].formName;
-            if (formName)
-                return this.componentList.getComponent(formName);
-        }
-        return null;
-    }
-    mgGetParameters(subformName) {
-        if (subformName in this.subformsDict) {
-            return this.subformsDict[subformName].parameters;
-        }
-        else
-            return "";
-    }
-    deleteSubformComp(subformControlName, formName) {
-        if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-            if (this.subformsDict[subformControlName].formName === formName) {
-                this.subformsDict[subformControlName] = {};
-                this.task.refreshView();
-            }
-        }
-    }
-    addSubformComp(subformControlName, formName, taskId, taskDescription, routerPath, params, inDefaultOutlet) {
-        this.pendingCommandsCollector.startCollecting();
-        let refreshNeeded = false;
-        if (isNullOrUndefined(routerPath)) {
-            if (Object.keys(this.subformsDict).indexOf(subformControlName) >= 0) {
-                if (this.subformsDict[subformControlName].formName === formName) {
-                    this.subformsDict[subformControlName] = {};
-                    this.task.refreshView();
-                }
-            }
-            this.subformsDict[subformControlName] = {
-                formName,
-                parameters: { taskIdParam: taskId, taskDescription: taskDescription }
-            };
-            refreshNeeded = true;
+            guiEvent.Value = event;
         }
         else {
-            if (inDefaultOutlet)
-                subformControlName = "primary";
-            let routeParams = new List();
-            routeParams.push(routerPath);
-            if (params !== null) {
-                routeParams = routeParams.concat(params);
+            if (!isNullOrUndefined(event.target)) {
+                let indexes = new Array(event.target.selectedOptions.length);
+                for (let i = 0; i < event.target.selectedOptions.length; i++) {
+                    indexes[i] = event.target.selectedOptions[i].index;
+                }
+                guiEvent.Value = indexes.join(',');
             }
-            let routeCommand = {
-                callerMgSubformServiceRef: this,
-                routerOutletName: subformControlName,
-                formName: formName,
-                parameters: { taskIdParam: taskId, taskDescription: taskDescription },
-                routeParams: routeParams
-            };
-            if (SubformMagicService.currentCallerMgSubformServiceRef === null)
-                this.ExecuteRouteCommand(routeCommand);
             else
-                this.routerCommandsMagicService.AddRouteCommand(routeCommand);
+                guiEvent.Value = event.value;
         }
-        if (refreshNeeded)
-            this.task.refreshView();
+        this.insertEvent(guiEvent);
     }
-    ExecuteRouteCommand(routeCommand) {
-        let reusingComponent = false;
-        let currentSubformMagicService = routeCommand.callerMgSubformServiceRef;
-        let relativeRoute = SubformMagicService.getRelativeRoute(currentSubformMagicService.activatedRoute);
-        if (currentSubformMagicService.routesDict[routeCommand.routerOutletName] === routeCommand.routeParams[0]) {
-            currentSubformMagicService.router.navigate([{ outlets: { [routeCommand.routerOutletName]: null } }], { relativeTo: relativeRoute })
-                .then((result) => {
-                SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
-                currentSubformMagicService.currentRouteDefinition = {
-                    formName: routeCommand.formName,
-                    parameters: routeCommand.parameters
-                };
-                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
-            });
+    onListBoxSelectionChanged(event, idx) {
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        let selectedOptions;
+        if (!isNullOrUndefined(event.target))
+            selectedOptions = event.target.selectedOptions;
+        else
+            selectedOptions = event.source.selectedOptions.selected;
+        let length = selectedOptions.length;
+        let indexes = new Array(length);
+        for (let i = 0; i < length; i++) {
+            if (!isNullOrUndefined(event.target))
+                indexes[i] = (selectedOptions[i]).index;
+            else
+                indexes[i] = (selectedOptions[i]).value;
+        }
+        guiEvent.Value = indexes;
+        this.insertEvent(guiEvent);
+    }
+    onCheckChanged(event, idx, rowId) {
+        if (typeof rowId === 'undefined')
+            rowId = 0;
+        let guiEvent = getGuiEventObj('selectionchanged', idx, rowId);
+        if (typeof (event) == 'boolean') {
+            guiEvent.Value = event;
         }
         else {
-            SubformMagicService.currentCallerMgSubformServiceRef = currentSubformMagicService;
-            currentSubformMagicService.currentRouteDefinition = {
-                formName: routeCommand.formName,
-                parameters: routeCommand.parameters
-            };
-            if (SubformMagicService.routerContainers.length > 0) {
-                let routeContainer = SubformMagicService.routerContainers[0];
-                SubformMagicService.routerContainers.shift();
-                routeContainer.initializeComponent();
-            }
-            else {
-                currentSubformMagicService.PerformRouterNavigate(routeCommand.routerOutletName, routeCommand.routeParams);
-            }
+            if (typeof event.target === 'undefined')
+                guiEvent.Value = (event).checked;
+            else
+                guiEvent.Value = (event.target).checked;
         }
+        this.insertEvent(guiEvent);
     }
-    PerformRouterNavigate(routerOutletName, routeParams) {
-        let relativeRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-        this.router.navigate([{ outlets: { [routerOutletName]: routeParams } }], { relativeTo: relativeRoute })
-            .then((result) => {
-            if (result !== null && !result) {
-                let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-                subformMagicService.currentRouteDefinition = null;
-                SubformMagicService.currentCallerMgSubformServiceRef = null;
-                subformMagicService.pendingCommandsCollector.stopCollecting();
-                subformMagicService.routerCommandsMagicService.ExecuteNextCommand();
-            }
-        });
+    mgOnTabSelectionChanged(idx, layer) {
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        guiEvent.Value = layer.toString();
+        this.insertEvent(guiEvent);
     }
-    init() {
-        const pendingCommands = this.pendingCommandsCollector.GetCommands(this.task.taskId);
-        if (pendingCommands.length > 0) {
-            pendingCommands.forEach(command => { this.task.executeCommand(command); });
-            this.task.refreshView();
-        }
-        this.pendingCommandsCollector.stopCollecting();
+    mgOnRadioSelectionChanged(event, idx) {
+        let result = this.getFormControl('0', idx);
+        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+        if (typeof result.value !== 'string')
+            guiEvent.Value = result.value.index;
+        else
+            guiEvent.Value = result.value;
+        this.insertEvent(guiEvent);
     }
-    refreshView() {
-        this.task.refreshView();
+    close() {
+        this.insertEvent(getGuiEventObj('close', null, 0));
     }
-    static getRelativeRoute(sendActivatedRoute) {
-        let currentActiveRoute = sendActivatedRoute;
-        if (currentActiveRoute.snapshot.routeConfig !== null && currentActiveRoute.snapshot.routeConfig.path === '') {
-            currentActiveRoute = currentActiveRoute.parent;
-            if (!currentActiveRoute.snapshot.routeConfig.loadChildren)
-                console.log("getRelativeRoute(): both path and currentActiveRoute.snapshot.routeConfig.loadChildren are empty.");
+    IsStub() {
+        return this.magic.isStub;
+    }
+    saveData(data) {
+        this.magic.saveData(data);
+    }
+    createData() {
+        let myData = {
+            records: this.Records,
+            template: this.template
+        };
+        let text = 'loadData():any   {\n' +
+            '    let stubData = ' + JSON.stringify(myData) + ';\n' +
+            '    this.loadStubData(stubData);}';
+        console.log(text);
+        this.saveData(text);
+    }
+    loadStubData(stubData) {
+        this.Records = stubData.records;
+        this.settemplate(stubData.template);
+        this.taskId = '1';
+        for (let i = 0; i < this.Records.list.length; i++)
+            this.buildTableRowControls(i);
+    }
+    loadData() {
+        alert('Please, overwrite method loadData');
+    }
+    setStubValue(guiRowId, fc, name) {
+        if (this.IsStub()) {
+            try {
+                let val = this.Records.list[guiRowId].values[name];
+                fc.setValue(val);
+            }
+            catch (e) {
+            }
         }
-        return currentActiveRoute;
     }
 }
-SubformMagicService.currentCallerMgSubformServiceRef = null;
-SubformMagicService.routerContainers = new Array();
-SubformMagicService.ɵfac = function SubformMagicService_Factory(t) { return new (t || SubformMagicService)(ɵɵinject(TaskMagicService), ɵɵinject(ActivatedRoute), ɵɵinject(ComponentListMagicService), ɵɵinject(CommandsCollectorMagicService), ɵɵinject(Router), ɵɵinject(RouterCommandsMagicService)); };
-SubformMagicService.ɵprov = ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
-(function () { ɵsetClassMetadata(SubformMagicService, [{
+TaskMagicService.ɵfac = function TaskMagicService_Factory(t) { return new (t || TaskMagicService)(ɵɵinject(EngineMagicService), ɵɵinject(OverlayWindowService)); };
+TaskMagicService.ɵprov = ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
+(function () { ɵsetClassMetadata(TaskMagicService, [{
         type: Injectable
-    }], function () { return [{ type: TaskMagicService }, { type: ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: Router }, { type: RouterCommandsMagicService }]; }, null); })();
+    }], function () { return [{ type: EngineMagicService }, { type: OverlayWindowService }]; }, null); })();
 
 class TableMagicService {
     constructor(componentList, task) {
@@ -2246,6 +2365,18 @@ class AccessorMagicService {
     getItemListValues(id, rowId) {
         return this.getProperty(id, HtmlProperties.ItemsList, rowId);
     }
+    getFilteredList(controlId, rowId) {
+        if (isNullOrUndefined(rowId))
+            rowId = '0';
+        let items = this.getItemListValues(controlId, rowId);
+        let value = this.task.getFormControl(rowId, controlId).value;
+        if (value !== null && value !== "" && items instanceof Array) {
+            value = value.toLowerCase();
+            return items.filter(option => option.displayValue.toLowerCase().includes(value));
+        }
+        else
+            return items;
+    }
     getDisplayValue(id, rowId) {
         let displayValue = "";
         let o = this.getProperty(id, HtmlProperties.ItemsList, rowId);
@@ -2502,7 +2633,8 @@ class RowMagicDirective {
     onClick($event) {
         if (this.rowId != '') {
             this._task.insertEvent(getGuiEventObj('click', "magicRow", +this.rowId));
-            event.cancelBubble = true;
+            if (MagicDirective.noOfAutoCompleteBoxesOpened < 1)
+                event.cancelBubble = true;
         }
     }
 }
@@ -2561,7 +2693,8 @@ class MagicDirective {
                 if (this.htmlElement instanceof HTMLButtonElement)
                     fromButton = true;
                 this.task.insertEvent(getGuiEventObj(event, this.id, +this.rowId, fromButton));
-                e.cancelBubble = true;
+                if (MagicDirective.noOfAutoCompleteBoxesOpened < 1)
+                    e.cancelBubble = true;
             });
         });
         this.renderer.listen(this.htmlElement, 'change', (e) => {
@@ -2601,7 +2734,7 @@ class MagicDirective {
                 (e.keyCode >= GuiConstants.KEY_F1 && e.keyCode <= GuiConstants.KEY_F12);
             if (guiEvent.modifiers !== Modifiers.MODIFIER_NONE || supportedKey) {
                 guiEvent.keyCode = e.keyCode;
-                if (e.keyCode !== GuiConstants.KEY_ESC || e.keyCode === GuiConstants.KEY_ESC && !MagicDirective.opened)
+                if (e.keyCode !== GuiConstants.KEY_ESC || e.keyCode === GuiConstants.KEY_ESC && (!MagicDirective.opened && MagicDirective.noOfAutoCompleteBoxesOpened < 1))
                     e.cancelBubble = true;
                 this.task.insertEvent(guiEvent);
             }
@@ -2696,6 +2829,7 @@ class MagicDirective {
     }
 }
 MagicDirective.opened = false;
+MagicDirective.noOfAutoCompleteBoxesOpened = 0;
 MagicDirective.ɵfac = function MagicDirective_Factory(t) { return new (t || MagicDirective)(ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(RowMagicDirective, 8)); };
 MagicDirective.ɵdir = ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", rowId: "rowId" } });
 (function () { ɵsetClassMetadata(MagicDirective, [{
@@ -2896,90 +3030,6 @@ NoControlMagicDirective.ɵdir = ɵɵdefineDirective({ type: NoControlMagicDirect
             args: ['magicnc']
         }] }); })();
 
-class RouterContainerMagicComponent {
-    constructor(activatedRoute, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
-        this.activatedRoute = activatedRoute;
-        this.magic = magic;
-        this.containerTaskService = containerTaskService;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.componentList = componentList;
-        this.pendingCommandsCollector = pendingCommandsCollector;
-        this.routerCommandsMagicService = routerCommandsMagicService;
-        this.componentRef = null;
-        this.parentMgSubformService = null;
-    }
-    ngOnInit() {
-        let outletname = this.activatedRoute.outlet;
-        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-        let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-        if (subformMagicService == null || subformMagicService.currentRouteDefinition === null) {
-            this.insertRouteEvent(currentActiveRoute);
-            SubformMagicService.routerContainers.push(this);
-        }
-        else {
-            this.initializeComponent();
-        }
-    }
-    insertRouteEvent(currentActiveRoute) {
-        let guiEvent = getGuiEventObj('RouterNavigate', null, 0);
-        guiEvent.RouterPath = currentActiveRoute.snapshot.routeConfig.path;
-        if (currentActiveRoute.snapshot.outlet !== 'primary')
-            guiEvent.RouterOutletName = currentActiveRoute.snapshot.outlet;
-        let calcRouterPath = currentActiveRoute.routeConfig.path;
-        if (calcRouterPath.length > 0) {
-            let routerPath = calcRouterPath;
-            let tokens = StrUtil.tokenize(routerPath, "/:");
-            guiEvent.RouterPath = tokens[0];
-            guiEvent.RouterParams = new List();
-            for (let i = 1; i < tokens.length; i++) {
-                guiEvent.RouterParams.push(this.activatedRoute.snapshot.params[tokens[i]]);
-            }
-        }
-        this.containerTaskService.insertEvent(guiEvent);
-    }
-    initializeComponent() {
-        let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
-        if (subformMagicService.currentRouteDefinition !== null) {
-            let comp = this.componentList.getComponent(subformMagicService.currentRouteDefinition.formName);
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
-            this.componentRef = this.viewContainerRef.createComponent(componentFactory);
-            Object.assign(this.componentRef.instance, subformMagicService.currentRouteDefinition.parameters);
-            let myActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            let routeParams = StrUtil.tokenize(myActiveRoute.snapshot.routeConfig.path, "/:");
-            subformMagicService.routesDict[myActiveRoute.snapshot.outlet] = routeParams[0];
-            this.parentMgSubformService = subformMagicService;
-            subformMagicService.currentRouteDefinition = null;
-            SubformMagicService.currentCallerMgSubformServiceRef = null;
-            let ignoreParamChange = true;
-            myActiveRoute.paramMap.subscribe(params => {
-                if (!ignoreParamChange)
-                    this.insertRouteEvent(myActiveRoute);
-                ignoreParamChange = false;
-            });
-            this.parentMgSubformService.refreshView();
-            this.routerCommandsMagicService.ExecuteNextCommand();
-        }
-    }
-    ngOnDestroy() {
-        if (this.componentRef != null) {
-            this.componentRef.instance.task.close();
-            let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
-            this.parentMgSubformService.routesDict[currentActiveRoute.outlet] = "";
-        }
-    }
-}
-RouterContainerMagicComponent.ɵfac = function RouterContainerMagicComponent_Factory(t) { return new (t || RouterContainerMagicComponent)(ɵɵdirectiveInject(ActivatedRoute), ɵɵdirectiveInject(EngineMagicService), ɵɵdirectiveInject(TaskMagicService), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(ViewContainerRef), ɵɵdirectiveInject(ComponentListMagicService), ɵɵdirectiveInject(CommandsCollectorMagicService), ɵɵdirectiveInject(RouterCommandsMagicService)); };
-RouterContainerMagicComponent.ɵcmp = ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
-(function () { ɵsetClassMetadata(RouterContainerMagicComponent, [{
-        type: Component,
-        args: [{
-                selector: 'magic-route-outlet',
-                template: `
-  `
-            }]
-    }], function () { return [{ type: ActivatedRoute }, { type: EngineMagicService }, { type: TaskMagicService }, { type: ComponentFactoryResolver }, { type: ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }]; }, null); })();
-
 class Constants {
 }
 Constants.DATE_FMT = 'dd/MMM/yyyy';