@magic-xpa/angular 4.900.0-dev491.7 → 4.901.0-ang15-dev491.310

package/fesm2015/magic-xpa-angular.mjs

@@ -10,14 +10,14 @@ import * as i3 from 'ng-dynamic-component';
 import { DynamicModule } from 'ng-dynamic-component';
 import { InteractiveCommandType, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
 import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
-import { MagicProperties, Logger, StrUtil, StorageAttribute, BindingLevel, StorageAttributeType, PICInterface } from '@magic-xpa/utils';
+import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
 import { Subject, fromEvent } from 'rxjs';
 import { __awaiter, __decorate, __metadata } from 'tslib';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$3 from '@angular/cdk/platform';
 
 class ControlMetadata {
@@ -318,8 +318,8 @@ class EngineMagicService {
     GetControlPictureMask(taskId, controlName) {
         return this.magicBridge.GetControlPictureMask(taskId, controlName);
     }
-    GetFormattedValue(taskId, controlName, value) {
-        return this.magicBridge.GetFormattedValue(taskId, controlName, value);
+    GetFormattedValue(taskId, controlName, value, rowId) {
+        return this.magicBridge.GetFormattedValue(taskId, controlName, value, rowId);
     }
     ValidateControlValue(taskId, controlName, value) {
         return this.magicBridge.ValidateControlValue(taskId, controlName, value);
@@ -610,6 +610,9 @@ SubformMagicService.ɵprov = i0.ɵɵdefineInjectable({ token: SubformMagicServic
 })();
 
 class RouterContainerMagicComponent {
+    static get LastRoute() {
+        return RouterContainerMagicComponent.lastRoute;
+    }
     constructor(activatedRoute, router, magic, containerTaskService, componentFactoryResolver, viewContainerRef, componentList, pendingCommandsCollector, routerCommandsMagicService) {
         this.activatedRoute = activatedRoute;
         this.router = router;
@@ -623,9 +626,6 @@ class RouterContainerMagicComponent {
         this.componentRef = null;
         this.parentMgSubformService = null;
     }
-    static get LastRoute() {
-        return RouterContainerMagicComponent.lastRoute;
-    }
     ngOnInit() {
         let subformMagicService = SubformMagicService.currentCallerMgSubformServiceRef;
         let currentActiveRoute = SubformMagicService.getRelativeRoute(this.activatedRoute);
@@ -824,15 +824,11 @@ class BaseMagicConfirmComponent {
     }
 }
 BaseMagicConfirmComponent.ɵfac = function BaseMagicConfirmComponent_Factory(t) { return new (t || BaseMagicConfirmComponent)(); };
-BaseMagicConfirmComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, styles: [""] });
+BaseMagicConfirmComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
             type: Component,
-            args: [{
-                    selector: 'mg-base-alert',
-                    template: '',
-                    styles: ['']
-                }]
+            args: [{ selector: 'mg-base-alert', template: '' }]
         }], null, { title: [{
                 type: Input
             }], message: [{
@@ -851,15 +847,11 @@ class BaseMagicAlertComponent {
     }
 }
 BaseMagicAlertComponent.ɵfac = function BaseMagicAlertComponent_Factory(t) { return new (t || BaseMagicAlertComponent)(); };
-BaseMagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, styles: [""] });
+BaseMagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
             type: Component,
-            args: [{
-                    selector: 'mg-base-alert',
-                    template: '',
-                    styles: ['']
-                }]
+            args: [{ selector: 'mg-base-alert', template: '' }]
         }], null, { title: [{
                 type: Input
             }], message: [{
@@ -993,13 +985,11 @@ MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlay
             i0.ɵɵelement(6, "div", 5);
             i0.ɵɵelementEnd();
         }
-    }, directives: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;top:0;z-index:999;right:0;bottom:0;left:0}"] });
+    }, dependencies: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;z-index:999;inset:0}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
             type: Component,
-            args: [{
-                    selector: 'app-magic-overlay-container-wrapper',
-                    template: `
+            args: [{ selector: 'app-magic-overlay-container-wrapper', template: `
     <div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" magicFocus></div>
       <div class="overlay-container-wrapper-background" #overlayContainerWrapper>
@@ -1008,19 +998,7 @@ MagicOverlayContainerWrapper.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlay
       </div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" ></div>
     </div>
-  `,
-                    styles: [`
-    .overlay-container-wrapper-background {
-      /* modal background fixed across whole screen */
-      position: fixed;
-      top: 0;
-      z-index: 999;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  `]
-                }]
+  `, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
         }], function () { return [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Compiler }]; }, { Component: [{
                 type: Input
             }], Parameters: [{
@@ -1082,7 +1060,7 @@ function MagicOverlayContainer_button_2_Template(rf, ctx) {
     if (rf & 1) {
         const _r5 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "button", 8);
-        i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.OnClose(); });
+        i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.OnClose()); });
         i0.ɵɵtext(1, "X");
         i0.ɵɵelementEnd();
     }
@@ -1093,7 +1071,7 @@ function MagicOverlayContainer_div_5_Template(rf, ctx) {
         i0.ɵɵelementStart(0, "div", 9, 10);
         i0.ɵɵtext(2);
         i0.ɵɵelementStart(3, "button", 11);
-        i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.OnClose(); });
+        i0.ɵɵlistener("click", function MagicOverlayContainer_div_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.OnClose()); });
         i0.ɵɵtext(4, "X");
         i0.ɵɵelementEnd()();
     }
@@ -1206,7 +1184,7 @@ MagicOverlayContainer.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContain
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
         }
-    }, directives: [i1.NgIf, i1.NgStyle, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}"] });
+    }, 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}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
             type: Component,
@@ -1226,7 +1204,7 @@ MagicOverlayContainer.ɵcmp = i0.ɵɵdefineComponent({ type: MagicOverlayContain
         </div>
       </div>
     </div>
-  `, styles: [".modal-foreground{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#fff}.modal-background{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}\n"] }]
+  `, 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"] }]
         }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, { headerElementRef: [{
                 type: ViewChild,
                 args: ['modalheader', { static: false }]
@@ -1281,46 +1259,14 @@ MagicAlertComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicAlertComponent,
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAlertComponent, [{
             type: Component,
-            args: [{
-                    selector: 'sample-magic-alert-component',
-                    template: `<div>
+            args: [{ selector: 'sample-magic-alert-component', template: `<div>
     <div class="mg-message-background">
       <h2> {{title}}</h2>
       <p>{{message}} </p>
 
       <button (click)="OnClose()">OK</button>
     </div>
-  </div>`,
-                    styles: [`
-    .mg-message-background {
-  background-color: #F5F5F5;
-  text-align: center;
-  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: white;
-  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 5px;
-  cursor: pointer;
-  }
-  `]
-                }]
+  </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;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
         }], null, null);
 })();
 
@@ -1353,9 +1299,7 @@ MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfir
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
             type: Component,
-            args: [{
-                    selector: 'sample-magic-confirmation-box',
-                    template: `<div>
+            args: [{ selector: 'sample-magic-confirmation-box', template: `<div>
     <div class="mg-message-background">
       <h2> {{title}}</h2>
       {{message}}
@@ -1365,41 +1309,7 @@ MagicConfirmationBoxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicConfir
       <button (click)="OnClose(true)">OK</button>
       <button class="cancel" (click)="OnClose(false)">Cancel</button>
     </div>
-  </div>`,
-                    styles: [`
-    .mg-message-background {
-  background-color: #F5F5F5;
-  text-align: center;
-  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: white;
-  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 5px;
-  cursor: pointer;
-  }
-    
-    button.cancel {
-      background-color: #C1C1C1;
-    }
-  `]
-                }]
+  </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;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
         }], null, null);
 })();
 
@@ -1812,8 +1722,8 @@ class TaskMagicService {
             guiRowId = '0';
         return this.Records.list.length > +guiRowId ? this.Records.list[guiRowId].values[controlId] : '';
     }
-    getFormattedValue(controlName, val) {
-        return this.magic.GetFormattedValue(this.taskId, controlName, val);
+    getFormattedValue(controlName, val, rowId) {
+        return this.magic.GetFormattedValue(this.taskId, controlName, val, rowId);
     }
     setValue(controlId, guiRowId, value) {
         return this.Records.list[guiRowId].setValue(controlId, value);
@@ -2021,7 +1931,10 @@ class TaskMagicService {
                     return val;
             }
             case StorageAttribute.NUMERIC:
-                return (val === null) ? 0 : val;
+                if (isUndefined(val))
+                    return val;
+                else
+                    return (val != null) ? +val : null;
             default:
                 return val;
         }
@@ -2252,7 +2165,7 @@ class TableMagicService {
         this.task.onScrollDown();
     }
     sortData(e) { }
-    mgOnPaginateChange(e) { }
+    mgOnPaginateChange(e, changeSelectedRow) { }
     mgOptionChanged(e) { }
     updateTableSize(size) {
         if (size === 0) {
@@ -2310,6 +2223,9 @@ const SYSTEM_BG = 4;
 const SYSTEM_FG_AND_SYSTEM_BG = 6;
 const TRANSPERENT_BG = 1;
 class MagicColorService {
+    getColorFilePath() {
+        return 'assets/' + this.colorFileName;
+    }
     constructor(http, colorFile1 = 'clr_rnt.eng') {
         this.http = http;
         this.colorFileName = 'clr_rnt.eng';
@@ -2319,9 +2235,6 @@ class MagicColorService {
         else
             this.colorFileName = 'clr_rnt.eng';
     }
-    getColorFilePath() {
-        return 'assets/' + this.colorFileName;
-    }
     getColorData() {
         if (!this.colorsData) {
             this.http.get(this.getColorFilePath(), { responseType: 'text' }).subscribe(resp => {
@@ -2409,9 +2322,9 @@ class AccessorMagicService {
         let properties;
         properties = this.task.Records.list[0].getControlMetadata(controlId);
         if (properties.properties.get(HtmlProperties.ReadOnly) !== null && properties.properties.get(HtmlProperties.ReadOnly) === true)
-            return false;
-        else
             return true;
+        else
+            return false;
     }
     getText(controlId, rowId) {
         return this.task.getProperty(controlId, HtmlProperties.Text, rowId);
@@ -2441,6 +2354,29 @@ class AccessorMagicService {
         let vis = this.getProperty(controlId, HtmlProperties.Visible, rowId);
         return vis ? 'visible' : 'hidden';
     }
+    getAlphaMask(controlId, rowId) {
+        if (isNullOrUndefined(controlId))
+            return null;
+        let pic = this.task.GetControlPictureMask(controlId);
+        let mask = pic.getMask();
+        let valueStr = new StringBuilder();
+        for (let i = 0; i < mask.length; i++) {
+            switch (mask.charCodeAt(i)) {
+                case PICInterface.PIC_N:
+                    valueStr.Append("0");
+                    break;
+                case PICInterface.PIC_U:
+                case PICInterface.PIC_L:
+                case PICInterface.PIC_X:
+                    valueStr.Append("A");
+                    break;
+                default:
+                    valueStr.Append(mask.charAt(i));
+                    break;
+            }
+        }
+        return (pic != null) ? valueStr.toString() : null;
+    }
     getNumericPicture(picture) {
         var obj = {};
         if (isNullOrUndefined(picture))
@@ -2509,7 +2445,7 @@ class AccessorMagicService {
     }
     getFormattedValue(controlId, rowId) {
         let val = this.task.getValue(controlId, rowId);
-        val = this.task.getFormattedValue(controlId, val);
+        val = this.task.getFormattedValue(controlId, val, rowId);
         return val;
     }
     getPicture(controlId, rowId) {
@@ -2849,6 +2785,16 @@ RowMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: RowMagicDirective, sele
 })();
 
 class MagicDirective {
+    set magic(val) {
+        this.id = val;
+        this.selector = "magic";
+    }
+    ;
+    set eventsOnly(val) {
+        console.log("eventsOnly");
+        this.eventsOnlyVal = true;
+    }
+    ;
     constructor(_task, element, renderer, vcRef, magicRow) {
         this._task = _task;
         this.element = element;
@@ -2858,28 +2804,18 @@ class MagicDirective {
         this.eventHandlers = {};
         this.eventsOnlyVal = false;
         this.htmlElement = this.element.nativeElement;
-        if (!(typeof magicRow === 'undefined' || magicRow === null))
+        if (!(typeof magicRow === "undefined" || magicRow === null))
             this.rowId = magicRow.rowId;
     }
-    set magic(val) {
-        this.id = val;
-        this.selector = 'magic';
-    }
-    ;
-    set eventsOnly(val) {
-        console.log('eventsOnly');
-        this.eventsOnlyVal = true;
-    }
-    ;
     get task() {
         return this._task;
     }
     regEvents() {
-        this.eventHandlers['focusin'] = this.OnFocus.bind(this);
+        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'];
+        let events = ["click", "mousedown", "dblclick"];
         events.forEach(event => {
             this.renderer.listen(this.htmlElement, event, (e) => {
                 let fromButton = false;
@@ -2890,15 +2826,15 @@ class MagicDirective {
                     e.cancelBubble = true;
             });
         });
-        this.renderer.listen(this.htmlElement, 'change', (e) => {
-            let guiEvent = getGuiEventObj('selectionchanged', this.id, +this.rowId);
+        this.renderer.listen(this.htmlElement, "change", (e) => {
+            let guiEvent = getGuiEventObj("selectionchanged", this.id, +this.rowId);
             if ((event.target).selectedIndex !== undefined) {
                 guiEvent.Value = (event.target).selectedIndex.toString();
                 e.cancelBubble = true;
                 this.task.insertEvent(guiEvent);
             }
         });
-        fromEvent(this.htmlElement, 'input').pipe(map((event) => {
+        fromEvent(this.htmlElement, "input").pipe(map((event) => {
             return event.target.value;
         }), debounceTime(200)).subscribe((x) => {
             if (this.task.getProperty(this.id, HtmlProperties.BindingLevel, this.rowId) === BindingLevel.Character) {
@@ -2907,8 +2843,8 @@ class MagicDirective {
                     this.task.mgAccessorService.setValueToControl(this.id, x, true);
             }
         });
-        this.renderer.listen(this.htmlElement, 'keydown', (e) => {
-            let guiEvent = getGuiEventObj('keydown', this.id, +this.rowId);
+        this.renderer.listen(this.htmlElement, "keydown", (e) => {
+            let guiEvent = getGuiEventObj("keydown", this.id, +this.rowId);
             guiEvent.modifiers = Modifiers.MODIFIER_NONE;
             if (e.altKey && e.keyCode !== GuiConstants.KEY_ALT)
                 guiEvent.modifiers = Modifiers.MODIFIER_ALT;
@@ -2934,7 +2870,7 @@ class MagicDirective {
         });
     }
     OnFocus() {
-        this.task.insertEvent(getGuiEventObj('focus', this.id, +this.rowId));
+        this.task.insertEvent(getGuiEventObj("focus", this.id, +this.rowId));
         event.cancelBubble = true;
     }
     IsSameElement(command) {
@@ -2954,7 +2890,7 @@ class MagicDirective {
             .subscribe(a => {
             let command = a;
             if (isNullOrUndefined(this.rowId))
-                this.rowId = '0';
+                this.rowId = "0";
             try {
                 if (!this.eventsOnlyVal)
                     this.handleCommand(command);
@@ -2982,7 +2918,7 @@ class MagicDirective {
                 this.focusUnlistener();
                 if (!(command.obj.ConnectedControl && this.htmlElement instanceof HTMLButtonElement))
                     this.htmlElement.focus();
-                this.focusUnlistener = this.renderer.listen(this.htmlElement, 'focusin', this.eventHandlers['focusin']);
+                this.focusUnlistener = this.renderer.listen(this.htmlElement, "focusin", this.eventHandlers["focusin"]);
                 break;
         }
     }
@@ -2992,13 +2928,13 @@ class MagicDirective {
                 let methodName = command._str;
                 let args = command.arguments;
                 let magicComponent = (this.vcRef._hostLView).find(v => v instanceof TaskBaseMagicComponent);
-                let resultString = '';
+                let resultString = "";
                 try {
                     if (!isNullOrUndefined(magicComponent[methodName])) {
                         resultString = magicComponent[methodName].apply(magicComponent, args);
                     }
                     else
-                        console.error('Instance method ' + methodName + ' does not exists');
+                        console.error("Instance method " + methodName + " does not exists");
                 }
                 catch (e) {
                     console.error(e.message);
@@ -3010,10 +2946,13 @@ class MagicDirective {
     handleSetProperty(command) {
         switch (command.Operation) {
             case HtmlProperties.ReadOnly:
-                if (command.obj1 != true)
-                    this.renderer.removeAttribute(this.htmlElement, command.Operation);
-                else
-                    this.renderer.setAttribute(this.htmlElement, command.Operation, command.str);
+                {
+                    if (command.obj.Type == MgControlType.CTRL_TYPE_TEXT)
+                        if (command.obj1 != true)
+                            this.renderer.removeAttribute(this.htmlElement, command.Operation);
+                        else
+                            this.renderer.setAttribute(this.htmlElement, command.Operation, command.str);
+                }
                 break;
         }
     }
@@ -3029,7 +2968,7 @@ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors:
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDirective, [{
             type: Directive,
             args: [{
-                    selector: '[magic]'
+                    selector: "[magic]"
                 }]
         }], function () {
         return [{ type: TaskMagicService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: RowMagicDirective, decorators: [{
@@ -3037,21 +2976,21 @@ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors:
                     }] }];
     }, { magic: [{
                 type: Input,
-                args: ['magic']
+                args: ["magic"]
             }], eventsOnly: [{
                 type: Input,
-                args: ['eventsOnly']
+                args: ["eventsOnly"]
             }], rowId: [{
                 type: Input
             }] });
 })();
 
 class NoControlMagicDirective extends MagicDirective {
+    set magic(val) { this.id = val; this.selector = 'magicnc'; }
+    ;
     constructor(_task, element, renderer, vcRef, magicRow) {
         super(_task, element, renderer, vcRef, magicRow);
     }
-    set magic(val) { this.id = val; this.selector = 'magicnc'; }
-    ;
     regEvents() {
         super.regEvents();
         if (this.htmlElement instanceof HTMLSelectElement) {
@@ -3345,6 +3284,25 @@ class MgformatMagicDirective {
         }
     }
     onFocusEvent($event) {
+        this.calculatePattern();
+    }
+    onInputEvent($event) {
+        this.calculatePattern();
+    }
+    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;
+        switch (attr) {
+            case StorageAttribute.ALPHA:
+            case StorageAttribute.UNICODE:
+                this.formatAlphaUnicode(control);
+                break;
+            case StorageAttribute.BOOLEAN:
+                this.formatBoolean(control);
+                break;
+        }
+    }
+    calculatePattern() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null) {
             let attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
@@ -3361,26 +3319,22 @@ class MgformatMagicDirective {
                     if (attr == StorageAttribute.ALPHA || attr == StorageAttribute.UNICODE) {
                         if (control.validator == null)
                             control.setValidators(Validators.maxLength(pic.getMaskLength()));
-                        else
-                            control.setValidators([control.validator, Validators.maxLength(pic.getMaskLength())]);
+                        else {
+                            if (pic.isFormatExp()) {
+                                control.setValidators(Validators.maxLength(pic.getMaskLength()));
+                                if (isUndefined(this.magicDir.rowId))
+                                    this.magicDir.rowId = '0';
+                                control.setValidators([control.validator, this._task.customValidator(this.magicDir.rowId, this.magicDir.id)]);
+                            }
+                            else
+                                control.setValidators([control.validator, Validators.maxLength(pic.getMaskLength())]);
+                        }
+                        control.updateValueAndValidity();
                     }
                 }
             }
         }
     }
-    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;
-        switch (attr) {
-            case StorageAttribute.ALPHA:
-            case StorageAttribute.UNICODE:
-                this.formatAlphaUnicode(control);
-                break;
-            case StorageAttribute.BOOLEAN:
-                this.formatBoolean(control);
-                break;
-        }
-    }
     formatDate(pic) {
         let mgDateFormatter = new MgDateFormatter();
         this._task.mgInputDateFormat = mgDateFormatter.ConvertMgDateFormatToAngular(pic.getMask());
@@ -3530,7 +3484,7 @@ class MgformatMagicDirective {
 MgformatMagicDirective.ɵfac = function MgformatMagicDirective_Factory(t) { return new (t || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
 MgformatMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirective, selectors: [["", "mgFormat", ""]], hostBindings: function MgformatMagicDirective_HostBindings(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵlistener("focus", function MgformatMagicDirective_focus_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); });
+            i0.ɵɵlistener("focus", function MgformatMagicDirective_focus_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("input", function MgformatMagicDirective_input_HostBindingHandler($event) { return ctx.onInputEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); });
         }
     } });
 (function () {
@@ -3542,6 +3496,9 @@ MgformatMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirec
         }], function () { return [{ type: MagicDirective }, { type: TaskMagicService }]; }, { onFocusEvent: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
+            }], onInputEvent: [{
+                type: HostListener,
+                args: ['input', ['$event']]
             }], onChangeEvent: [{
                 type: HostListener,
                 args: ['change', ['$event']]
@@ -3659,14 +3616,14 @@ function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) {
     }
 }
 class SubformMagicComponent {
+    set magic(val) { this.id = val; }
+    ;
     constructor(vcRef, mgSub) {
         this.vcRef = vcRef;
         this.mgSub = mgSub;
         this.component = null;
         this.component = (this.vcRef._hostLView).find(v => !isNullOrUndefined(v));
     }
-    set magic(val) { this.id = val; }
-    ;
     get Component() {
         return this.mgSub.mgGetComp(this.id);
     }
@@ -3682,7 +3639,7 @@ SubformMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SubformMagicCompone
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.Component);
         }
-    }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
+    }, dependencies: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
             type: Component,
@@ -3731,13 +3688,6 @@ function ErrorMagicComponent_div_0_Template(rf, ctx) {
 }
 const _c1 = ["*"];
 class ErrorMagicComponent {
-    constructor(_task, mgService, changeDetectorRef) {
-        this._task = _task;
-        this.mgService = mgService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.defaultDisplay = true;
-        this.rowId = "0";
-    }
     set magic(val) {
         this.id = val;
     }
@@ -3751,6 +3701,13 @@ class ErrorMagicComponent {
         this.changeDetectorRef.detectChanges();
     }
     ;
+    constructor(_task, mgService, changeDetectorRef) {
+        this._task = _task;
+        this.mgService = mgService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.defaultDisplay = true;
+        this.rowId = "0";
+    }
     isEmpty(element) {
         const nodes = element.childNodes;
         for (let i = 0; i < nodes.length; i++) {
@@ -3799,7 +3756,7 @@ ErrorMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent,
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
         }
-    }, directives: [i1.NgIf], encapsulation: 2 });
+    }, dependencies: [i1.NgIf], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
             type: Component,
@@ -4053,14 +4010,11 @@ MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent,
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.showSpinner);
         }
-    }, directives: [i1.NgIf, i3.DynamicComponent, i3.DynamicIoDirective, MagicViewContainerRef, i1.NgTemplateOutlet], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;top:0;right:0;bottom:0;z-index:1000;left:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+    }, dependencies: [i1.NgIf, i1.NgTemplateOutlet, i3.DynamicComponent, i3.DynamicIoDirective, MagicViewContainerRef], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:_ngcontent-%COMP%_spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
             type: Component,
-            args: [{
-                    selector: 'magic-root',
-                    providers: [],
-                    template: `
+            args: [{ selector: 'magic-root', providers: [], template: `
     <div #magicRoot>
       <ndc-dynamic
         *ngIf = "RootComponent !== null"
@@ -4079,38 +4033,7 @@ MagicShellComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MagicShellComponent,
     <ng-template #defaultSpinner>
       <div class="mgSpinnerClass"></div>
     </ng-template>
-  `,
-                    styles: [`
-    .mgSpinnerClass {
-      border: 10px solid #cccccc; /* Light grey */
-      border-top: 10px solid black; /* Blue */
-      border-radius: 50%;
-      position: fixed;
-      margin: auto;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 100px;
-      height: 100px;
-      animation: spin 2s linear infinite;
-    }
-    .spinner-background {
-      /* background fixed across whole screen */
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1000;
-      left: 0;
-      opacity: 0.5;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  `]
-                }]
+  `, 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"] }]
         }], function () {
         return [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: ExitMagicService, decorators: [{
                         type: Optional
@@ -4299,6 +4222,11 @@ DateValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, sele
 })();
 
 class NonMagicControlDirective {
+    set magic(val) {
+        this.id = val;
+        this.selector = 'NonMagicControl';
+    }
+    ;
     constructor(_task, element, renderer, vcRef) {
         this._task = _task;
         this.element = element;
@@ -4308,11 +4236,6 @@ class NonMagicControlDirective {
         this.eventsOnlyVal = false;
         this.htmlElement = this.element.nativeElement;
     }
-    set magic(val) {
-        this.id = val;
-        this.selector = 'NonMagicControl';
-    }
-    ;
     get task() {
         return this._task;
     }
@@ -4378,14 +4301,12 @@ class MagicModule {
 }
 MagicModule.ɵfac = function MagicModule_Factory(t) { return new (t || MagicModule)(); };
 MagicModule.ɵmod = i0.ɵɵdefineNgModule({ type: MagicModule });
-MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            RouterModule,
-            DynamicModule,
-            HttpClientModule
-        ]] });
+MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        DynamicModule,
+        HttpClientModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
             type: NgModule,
@@ -4478,11 +4399,13 @@ const MG_FORMATS = {
     }
 };
 class MgDateAdapter extends NativeDateAdapter {
-    constructor(platform, task) {
-        super('en-US', platform);
+    constructor(platform, task, localeId) {
+        super(localeId, platform);
         this.platform = platform;
         this.task = task;
+        this.localeId = localeId;
         this.mgdtfmt = null;
+        this.setLocale(localeId);
     }
     parse(value) {
         let valueStr = value;
@@ -4542,7 +4465,7 @@ class MgDateAdapter extends NativeDateAdapter {
             }
             if (month == 0 && year == 0 && date == 0)
                 return null;
-            return new Date(Date.UTC(year, month, date));
+            return new Date(year, month, date);
         }
     }
     format(date, displayFormat) {
@@ -4558,12 +4481,17 @@ class MgDateAdapter extends NativeDateAdapter {
         }
     }
 }
-MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(i0.ɵɵinject(i1$3.Platform), i0.ɵɵinject(TaskMagicService)); };
+MgDateAdapter.ɵfac = function MgDateAdapter_Factory(t) { return new (t || MgDateAdapter)(i0.ɵɵinject(i1$3.Platform), i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MAT_DATE_LOCALE)); };
 MgDateAdapter.ɵprov = i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgDateAdapter, [{
             type: Injectable
-        }], function () { return [{ type: i1$3.Platform }, { type: TaskMagicService }]; }, null);
+        }], function () {
+        return [{ type: i1$3.Platform }, { type: TaskMagicService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DATE_LOCALE]
+                    }] }];
+    }, null);
 })();
 
 const matDateProviders = [