@magic-xpa/angular 4.1000.0-dev4100.43 → 4.1000.0-dev4100.431

package/fesm2015/magic-xpa-angular.mjs

@@ -8,15 +8,17 @@ import { 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, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
-import { MagicBridge, getGuiEventObj, CookieService } from '@magic-xpa/engine';
+import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, 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 { 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 { maskitoTimeOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
+import { MaskitoModule } from '@maskito/angular';
 import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$3 from '@angular/cdk/platform';
 
@@ -610,6 +612,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 +628,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);
@@ -754,6 +756,11 @@ class GuiInteractiveExecutor {
         }
         else if (this.task.isTableControl(this.command.controlName))
             val = this.task.getValue(this.command.controlName, guiRowId.toString());
+        if (this.command._boolVal) {
+            const indeterminate = this.task.getProperty(this.command.controlName, HtmlProperties.CheckBoxIndeterminate, guiRowId.toString());
+            if (indeterminate)
+                val = null;
+        }
         val = this.task.ConvertValToNative(this.command.controlName, guiRowId, val);
         this.command._mgValue.obj = val;
     }
@@ -824,15 +831,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 +854,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 +992,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;z-index:999;inset: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 +1005,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 +1067,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 +1078,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 +1191,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;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, 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,
@@ -1281,46 +1266,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 +1306,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 +1316,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);
 })();
 
@@ -1629,6 +1546,7 @@ class TaskMagicService {
         this.OnSelectedRowChanged = new EventEmitter();
         this.customPropertiesSubject = new Subject();
         this.recordsCountChangeSubject = new Subject();
+        this.mgLoadSubject = new Subject();
         this.oldPageSize = 0;
         this.Records.setGuiTopIndex(0);
         this.mgInputDateFormat = null;
@@ -1881,6 +1799,11 @@ class TaskMagicService {
                     }
                 }
                 break;
+            case CommandType.SET_CHUNK_SIZE:
+                if (!isUndefined(command.number)) {
+                    this.tableService.setChunkSize(command.number);
+                }
+                break;
             case CommandType.SET_RECORDS_BEFORE_CURRENT_VIEW:
                 this.updateRecordsBeforeCurrentView(command.number);
                 break;
@@ -1908,7 +1831,9 @@ class TaskMagicService {
                 break;
             case CommandType.SET_PROPERTY:
                 this.handleSetProperty(command, isTableChild);
-                if (command.Operation == HtmlProperties.ReadOnly)
+                if (command.Operation == HtmlProperties.ReadOnly ||
+                    command.Operation == HtmlProperties.ItemsList ||
+                    command.Operation == HtmlProperties.CheckBoxIndeterminate)
                     this.refreshDom.next(command);
                 break;
             case CommandType.PROP_SET_USER_PROPERTY:
@@ -1963,6 +1888,9 @@ class TaskMagicService {
             case CommandType.SET_FOCUS:
                 this.refreshDom.next(command);
                 break;
+            case CommandType.SET_WC_IDLE:
+                this.mgLoadSubject.next();
+                break;
         }
     }
     customValidator(rowid, id) {
@@ -2021,7 +1949,10 @@ class TaskMagicService {
                     return val;
             }
             case StorageAttribute.NUMERIC:
-                return +val;
+                if (isUndefined(val))
+                    return val;
+                else
+                    return (val != null) ? +val : null;
             default:
                 return val;
         }
@@ -2142,6 +2073,16 @@ class TaskMagicService {
         if (typeof (event) == 'boolean') {
             guiEvent.Value = event;
         }
+        else if (typeof (event) == 'string') {
+            if (event == "unchecked") {
+                guiEvent.Value = false;
+            }
+            else if (event == 'indeterminate')
+                guiEvent.Value = null;
+            else if (event == 'checked') {
+                guiEvent.Value = true;
+            }
+        }
         else {
             if (typeof event.target === 'undefined')
                 guiEvent.Value = (event).checked;
@@ -2158,10 +2099,10 @@ class TaskMagicService {
     mgOnRadioSelectionChanged(idx) {
         let result = this.getFormControl('0', idx);
         let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
-        if (typeof result.value !== 'string')
+        if (typeof result.value !== 'number')
             guiEvent.Value = result.value.index;
         else
-            guiEvent.Value = result.value;
+            guiEvent.Value = result.value.toString();
         this.insertEvent(guiEvent);
     }
     close() {
@@ -2222,7 +2163,10 @@ class TableMagicService {
     refreshDataSource() {
     }
     getPageSize() {
-        return 10;
+        return this.chunkSize;
+    }
+    setChunkSize(size) {
+        this.chunkSize = size;
     }
     getMaxRowsInTable() {
         return this.task.Records.list.length;
@@ -2310,6 +2254,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 +2266,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 => {
@@ -2403,6 +2347,8 @@ class AccessorMagicService {
         this.task = task;
         this.magicColor = magicColor;
         this.Logger = null;
+        this.hhmm = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });
+        this.hhmmss = maskitoTimeOptionsGenerator({ mode: 'HH:MM:SS' });
         this.Logger = Logger.Instance;
     }
     checkIsReadOnly(controlId) {
@@ -2638,8 +2584,30 @@ class AccessorMagicService {
         let c = this.task.getFormControl(rowId, id);
         if (c.hasError('required'))
             return 'Control must be updated.';
-        if (c.hasError('pattern'))
-            return 'Required pattern is : ' + c.errors.pattern.requiredPattern;
+        if (c.hasError('pattern')) {
+            if (c.errors.pattern.actualValue < 0 && !c.errors.pattern.requiredPattern.includes('-'))
+                return 'Value must be non-negative';
+            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";
+                }
+            }
+            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";
+            }
+            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";
+                }
+            }
+        }
         if (c.hasError('rangevalidator'))
             return c.errors.rangevalidator.errorMsg;
         if (c.hasError('maxlength'))
@@ -2779,6 +2747,9 @@ class TaskBaseMagicComponent {
         this.task.recordsCountChangeSubject.pipe().subscribe(value => {
             this.RecordsCountChanged(value);
         });
+        this.task.mgLoadSubject.pipe().subscribe(value => {
+            this.mgOnLoad();
+        });
     }
     createFormControlsAccessor(formGroup) { }
     setInputDateFormat() { }
@@ -2786,11 +2757,13 @@ class TaskBaseMagicComponent {
     }
     RecordsCountChanged(recordsCount) {
     }
+    mgOnLoad() {
+    }
     ngAfterViewInit() {
         this.mgSub.init();
     }
     ngAfterContentChecked() {
-        if (this.task.oldPageSize != this.tableService.getPageSize()) {
+        if (!isNullOrUndefined(this.tableService.getPageSize()) && this.task.oldPageSize != this.tableService.getPageSize()) {
             this.task.resize(this.tableService.getPageSize(), 0);
             this.task.oldPageSize = this.tableService.getPageSize();
         }
@@ -2872,6 +2845,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;
@@ -2884,16 +2867,6 @@ class MagicDirective {
         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;
     }
@@ -3073,11 +3046,11 @@ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors:
 })();
 
 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) {
@@ -3360,6 +3333,7 @@ class MgformatMagicDirective {
     constructor(magicDir, _task) {
         this.magicDir = magicDir;
         this._task = _task;
+        this.datePasteFlag = false;
     }
     ngAfterViewInit() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
@@ -3373,9 +3347,170 @@ class MgformatMagicDirective {
     onFocusEvent($event) {
         this.calculatePattern();
     }
-    onInputEvent($event) {
+    onPaste(event) {
+        this.datePasteFlag = true;
+    }
+    onInputEvent(event) {
+        let attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
+        if (attr == StorageAttribute.DATE) {
+            if (!this.datePasteFlag)
+                this.dateMasking(event);
+            this.datePasteFlag = false;
+        }
         this.calculatePattern();
     }
+    dateMasking(event) {
+        const input = event.target;
+        let cursorPos = event.target.selectionStart;
+        const separator = this._task.mgInputDateFormat.includes('/') ? '/' : '-';
+        if (cursorPos >= input.value.length) {
+            const value = input.value.replace(/[^a-zA-Z0-9/-]/g, '');
+            if (this._task.mgInputDateFormat == "dd/MM/yyyy" || this._task.mgInputDateFormat == "MM/dd/yyyy" || this._task.mgInputDateFormat == "dd-MM-yyyy" || this._task.mgInputDateFormat == "MM-dd-yyyy") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '01' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = 0 + value;
+                else if (value.length == 3 && value[2] != separator)
+                    input.value = value.slice(0, 2) + separator + value.slice(2);
+                else if (value.length == 4 && value[3] == separator)
+                    input.value = value.slice(0, 3) + '01' + value.slice(3);
+                else if (value.length == 5 && value[4] == separator)
+                    input.value = value.slice(0, 3) + '0' + value.slice(3);
+                else if (value.length == 6 && value[5] != separator)
+                    input.value = value.slice(0, 5) + separator + value.slice(5);
+                else if (value.length >= 10)
+                    input.value = value.slice(0, 10);
+            }
+            else if (this._task.mgInputDateFormat == "yyyy/MM/dd" || this._task.mgInputDateFormat == "yyyy/dd/MM" || this._task.mgInputDateFormat == "yyyy-MM-dd" || this._task.mgInputDateFormat == "yyyy-dd-MM") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '0000' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = '000' + value.slice(0);
+                else if (value.length == 3 && value[2] == separator)
+                    input.value = '00' + value.slice(0);
+                else if (value.length == 4 && value[3] == separator)
+                    input.value = '0' + value.slice(0);
+                else if (value.length == 5 && value[4] != separator)
+                    input.value = value.slice(0, 4) + separator + value.slice(4);
+                else if (value.length == 6 && value[5] == separator)
+                    input.value = value.slice(0, 5) + '01' + value.slice(5);
+                else if (value.length == 7 && value[6] == separator)
+                    input.value = value.slice(0, 5) + '0' + value.slice(5);
+                else if (value.length == 8 && value[7] != separator)
+                    input.value = value.slice(0, 7) + separator + value.slice(7);
+                else if (value.length >= 10)
+                    input.value = value.slice(0, 10);
+            }
+            else if (this._task.mgInputDateFormat == "dd/MM/yy" || this._task.mgInputDateFormat == "yy/MM/dd" || this._task.mgInputDateFormat == "MM/dd/yy" || this._task.mgInputDateFormat == "yy/dd/MM" || this._task.mgInputDateFormat == "dd-MM-yy" || this._task.mgInputDateFormat == "yy-MM-dd" || this._task.mgInputDateFormat == "MM-dd-yy" || this._task.mgInputDateFormat == "yy-dd-MM") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '01' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = 0 + value;
+                else if (value.length == 3 && value[2] != separator)
+                    input.value = value.slice(0, 2) + separator + value.slice(2);
+                else if (value.length == 4 && value[3] == separator)
+                    input.value = value.slice(0, 3) + '01' + value.slice(3);
+                else if (value.length == 5 && value[4] == separator)
+                    input.value = value.slice(0, 3) + '0' + value.slice(3);
+                else if (value.length == 6 && value[5] != separator)
+                    input.value = value.slice(0, 5) + separator + value.slice(5);
+                else if (value.length >= 8)
+                    input.value = value.slice(0, 8);
+            }
+            else if (this._task.mgInputDateFormat == "dd/MMM/yy" || this._task.mgInputDateFormat == "dd-MMM-yy") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '01' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = 0 + value;
+                else if (value.length == 3 && value[2] != separator)
+                    input.value = value.slice(0, 2) + separator + value.slice(2);
+                else if (value.length == 7 && value[6] != separator)
+                    input.value = value.slice(0, 6) + separator + value.slice(6);
+                else if (value.length >= 9)
+                    input.value = value.slice(0, 9);
+            }
+            else if (this._task.mgInputDateFormat == "dd/MMM/yyyy" || this._task.mgInputDateFormat == "dd-MMM-yyyy") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '01' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = 0 + value;
+                else if (value.length == 3 && value[2] != separator)
+                    input.value = value.slice(0, 2) + separator + value.slice(2);
+                else if (value.length == 7 && value[6] != separator)
+                    input.value = value.slice(0, 6) + separator + value.slice(6);
+                else if (value.length >= 11)
+                    input.value = value.slice(0, 11);
+            }
+            else if (this._task.mgInputDateFormat == "yy/dd/MMM" || this._task.mgInputDateFormat == "yy-dd-MMM") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '00' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = 0 + value;
+                else if (value.length == 3 && value[2] != separator)
+                    input.value = value.slice(0, 2) + separator + value.slice(2);
+                else if (value.length == 4 && value[3] == separator)
+                    input.value = value.slice(0, 3) + '01' + value.slice(3);
+                else if (value.length == 5 && value[4] == separator)
+                    input.value = value.slice(0, 3) + '0' + value.slice(3);
+                else if (value.length == 6 && value[5] != separator)
+                    input.value = value.slice(0, 5) + separator + value.slice(5);
+                else if (value.length >= 9)
+                    input.value = value.slice(0, 9);
+            }
+            else if (this._task.mgInputDateFormat == "yyyy/dd/MMM" || this._task.mgInputDateFormat == "yyyy-dd-MMM") {
+                if (value.length == 1 && value[0] == separator)
+                    input.value = '0000' + separator;
+                else if (value.length == 2 && value[1] == separator)
+                    input.value = '000' + value.slice(0);
+                else if (value.length == 3 && value[2] == separator)
+                    input.value = '00' + value.slice(0);
+                else if (value.length == 4 && value[3] == separator)
+                    input.value = '0' + value.slice(0);
+                else if (value.length == 5 && value[4] != separator)
+                    input.value = value.slice(0, 4) + separator + value.slice(4);
+                else if (value.length == 6 && value[5] == separator)
+                    input.value = value.slice(0, 5) + '01' + value.slice(5);
+                else if (value.length == 7 && value[6] == separator)
+                    input.value = value.slice(0, 5) + '0' + value.slice(5);
+                else if (value.length == 8 && value[7] != separator)
+                    input.value = value.slice(0, 7) + separator + value.slice(7);
+                else if (value.length >= 11)
+                    input.value = value.slice(0, 11);
+            }
+            else if (this._task.mgInputDateFormat == "MMM/dd/yy" || this._task.mgInputDateFormat == "MMM-dd-yy") {
+                if (value.length == 4 && value[3] != separator)
+                    input.value = value.slice(0, 3) + separator + value.slice(3);
+                else if (value.length == 5 && value[4] == separator)
+                    input.value = value.slice(0, 4) + '01' + value.slice(4);
+                else if (value.length == 6 && value[5] == separator)
+                    input.value = value.slice(0, 4) + '0' + value.slice(4);
+                else if (value.length == 7 && value[6] != separator)
+                    input.value = value.slice(0, 6) + separator + value.slice(6);
+                else if (value.length >= 9)
+                    input.value = value.slice(0, 9);
+            }
+            else if (this._task.mgInputDateFormat == "MMM/dd/yyyy" || this._task.mgInputDateFormat == "MMM-dd-yyyy") {
+                if (value.length == 4 && value[3] != separator)
+                    input.value = value.slice(0, 3) + separator + value.slice(3);
+                else if (value.length == 5 && value[4] == separator)
+                    input.value = value.slice(0, 4) + '01' + value.slice(4);
+                else if (value.length == 6 && value[5] == separator)
+                    input.value = value.slice(0, 4) + '0' + value.slice(4);
+                else if (value.length == 7 && value[6] != separator)
+                    input.value = value.slice(0, 6) + separator + value.slice(6);
+                else if (value.length >= 11)
+                    input.value = value.slice(0, 11);
+            }
+        }
+        if (cursorPos < input.value.length && input.value.length > this._task.mgInputDateFormat.length) {
+            let inputDate = input.value;
+            let start = input.selectionStart - 1;
+            let end = input.selectionEnd - 1;
+            let indexToRemove = input.selectionStart - 1;
+            input.value = inputDate.slice(0, indexToRemove) + inputDate.slice(indexToRemove + 1);
+            input.setSelectionRange(start, end);
+        }
+    }
     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;
@@ -3389,6 +3524,170 @@ class MgformatMagicDirective {
                 break;
         }
     }
+    onBlurEvent(event) {
+        let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
+        let attr = this._task.Records.list[0].getControlMetadata(this.magicDir.id).dataType;
+        const century = Environment.Instance.GetCentury(LastFocusedManager.Instance.getCurrTask().getCompIdx());
+        if (attr == StorageAttribute.DATE)
+            this.formatDateWithCentury(event.target.value, century, control);
+    }
+    formatDateWithCentury(userInput, century, control) {
+        const dateFormat = this._task.mgInputDateFormat;
+        const separator = userInput.includes('/') ? '/' : "-";
+        let centuryVal = parseInt(century.toString().slice(0, 2));
+        if (userInput.length == 0)
+            return;
+        if ((dateFormat == 'dd/MMM/yyyy' || dateFormat == 'dd-MMM-yyyy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments1(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'dd/MM/yyyy' || dateFormat == 'dd-MM-yyyy' || dateFormat == 'd/M/yyyy' || dateFormat == 'd-M-yyyy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments1(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'MM/dd/yyyy' || dateFormat == 'MM-dd-yyyy' || dateFormat == 'M/d/yyyy' || dateFormat == 'M-d-yyyy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments2(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'MMM/dd/yyyy' || dateFormat == 'MMM-dd-yyyy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments2(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yyyy/MM/dd' || dateFormat == 'yyyy-MM-dd')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments3(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yyyy/dd/MM' || dateFormat == 'yyyy-dd-MM')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments4(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yyyy/dd/MMM' || dateFormat == 'yyyy-dd-MMM')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments4(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'dd/MM/yy' || dateFormat == 'dd-MM-yy' || dateFormat == 'd/M/yy' || dateFormat == 'd-M-yy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments1(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'MM/dd/yy' || dateFormat == 'MM-dd-yy' || dateFormat == 'M/d/yy' || dateFormat == 'M-d-yy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments2(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yy/MM/dd' || dateFormat == 'yy-MM-dd')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments3(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yy/dd/MM' || dateFormat == 'yy-dd-MM')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments4(dateArray);
+            if ((day < 32 && month < 13)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'dd/MMM/yy' || dateFormat == 'dd-MMM-yy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments1(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yy/dd/MMM' || dateFormat == 'yy-dd-MMM')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments4(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'MMM/dd/yy' || dateFormat == 'MMM-dd-yy')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments2(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if ((dateFormat == 'yyyy/MMM/dd' || dateFormat == 'yyyy-MMM-dd' || dateFormat == 'yy/MMM/dd' || dateFormat == 'yy-MMM-dd')) {
+            const dateArray = userInput.split(separator);
+            const [day, month, year] = this.getDateSegments3(dateArray);
+            const isMonthInNumber = !isNaN(Number(month));
+            if ((isMonthInNumber && day < 32 && Number(month) < 13) || (!isMonthInNumber && day < 32)) {
+                this.updateYear(day, month, year, separator, century, centuryVal, control);
+            }
+        }
+        else if (dateFormat == 'yyyy/MM' || dateFormat == 'yyyy-MM') {
+            const dateArray = userInput.split(separator);
+            const month = dateArray[1];
+            const year = Number(dateArray[0]);
+            if (Number(month) < 13) {
+                this.updateYear(1, month, year, separator, century, centuryVal, control);
+            }
+        }
+    }
+    updateYear(day, month, year, separator, century, centuryVal, control) {
+        let updatedYear = year.toString().length === 2 ? (year < century % 100 ? centuryVal + 1 : centuryVal) + '' + year :
+            year.toString().length === 1 ? (year < century % 100 ? centuryVal + 1 : centuryVal) + '0' + year :
+                year;
+        control.setValue(new Date(`${updatedYear}${separator}${month}${separator}${day}`));
+    }
+    getDateSegments1(dateArray) {
+        const day = Number(dateArray[0]);
+        const month = dateArray[1];
+        const year = Number(dateArray[2]);
+        return [day, month, year];
+    }
+    getDateSegments2(dateArray) {
+        const day = Number(dateArray[1]);
+        const month = dateArray[0];
+        const year = Number(dateArray[2]);
+        return [day, month, year];
+    }
+    getDateSegments3(dateArray) {
+        const day = Number(dateArray[2]);
+        const month = dateArray[1];
+        const year = Number(dateArray[0]);
+        return [day, month, year];
+    }
+    getDateSegments4(dateArray) {
+        const day = Number(dateArray[1]);
+        const month = dateArray[2];
+        const year = Number(dateArray[0]);
+        return [day, month, year];
+    }
     calculatePattern() {
         let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
         if (control != null) {
@@ -3571,7 +3870,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); })("input", function MgformatMagicDirective_input_HostBindingHandler($event) { return ctx.onInputEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); });
+            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); });
         }
     } });
 (function () {
@@ -3583,12 +3882,18 @@ MgformatMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirec
         }], function () { return [{ type: MagicDirective }, { type: TaskMagicService }]; }, { onFocusEvent: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
             }], onInputEvent: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }], onChangeEvent: [{
                 type: HostListener,
                 args: ['change', ['$event']]
+            }], onBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
             }] });
 })();
 
@@ -3703,14 +4008,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);
     }
@@ -3726,7 +4031,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,
@@ -3775,13 +4080,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;
     }
@@ -3795,6 +4093,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++) {
@@ -3843,7 +4148,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,
@@ -3872,19 +4177,81 @@ ErrorMagicComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ErrorMagicComponent,
 })();
 
 class CheckboxMagicDirective {
-    constructor(magicDirective) {
+    constructor(magicDirective, el, task) {
         this.magicDirective = magicDirective;
+        this.el = el;
+        this.task = task;
+        this.threeState = false;
+        this.subscribeRefreshDom = null;
+        this.isIndeterminate = false;
     }
     onChange($event) {
-        this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
+        if (this.threeState) {
+            this.handleThreeState();
+        }
+        else {
+            this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
+        }
+    }
+    ngOnInit() {
+        if (this.threeState) {
+            let guiEvent = getGuiEventObj("setAsThreeState", this.magicDirective.id, +this.magicDirective.rowId);
+            this.task.insertEvent(guiEvent);
+            this.el.nativeElement.indeterminate = this.isIndeterminate = this.task.getProperty(this.magicDirective.id, HtmlProperties.CheckBoxIndeterminate, this.magicDirective.rowId);
+            this.regUpdatesUI();
+        }
+    }
+    regUpdatesUI() {
+        this.subscribeRefreshDom = this.task
+            .refreshDom.pipe(filter(c => this.magicDirective.IsSameElement(c)))
+            .subscribe(a => {
+            let command = a;
+            try {
+                this.handleCommand(command);
+            }
+            catch (ex) {
+                console.dir(ex);
+            }
+        });
+    }
+    handleCommand(command) {
+        if (command.CommandType == CommandType.SET_PROPERTY &&
+            command.Operation == HtmlProperties.CheckBoxIndeterminate) {
+            this.isIndeterminate = this.el.nativeElement.indeterminate = command.obj1;
+        }
+    }
+    handleThreeState() {
+        let value = '';
+        let prevCheckedValue = this.task.getValue(this.magicDirective.id, this.magicDirective.rowId);
+        const checkbox = this.el.nativeElement;
+        if (this.isIndeterminate) {
+            checkbox.checked = false;
+            checkbox.indeterminate = false;
+            value = 'unchecked';
+        }
+        else if (prevCheckedValue) {
+            checkbox.checked = false;
+            checkbox.indeterminate = true;
+            value = 'indeterminate';
+        }
+        else if (!prevCheckedValue) {
+            checkbox.checked = true;
+            checkbox.indeterminate = false;
+            value = 'checked';
+        }
+        this.magicDirective.task.onCheckChanged(value, this.magicDirective.id, +this.magicDirective.rowId);
+    }
+    ngOnDestroy() {
+        if (this.subscribeRefreshDom !== null)
+            this.subscribeRefreshDom.unsubscribe();
     }
 }
-CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+CheckboxMagicDirective.ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
 CheckboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵlistener("change", function CheckboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
         }
-    } });
+    }, inputs: { threeState: "threeState" } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
             type: Directive,
@@ -3893,7 +4260,9 @@ CheckboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirec
     input[type=checkbox][magic]:not([noFormControl])
 `,
                 }]
-        }], function () { return [{ type: MagicDirective }]; }, { onChange: [{
+        }], function () { return [{ type: MagicDirective }, { type: i0.ElementRef }, { type: TaskMagicService }]; }, { threeState: [{
+                type: Input
+            }], onChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
             }] });
@@ -3902,10 +4271,18 @@ CheckboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirec
 class ComboboxMagicDirective {
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
+        this.magicDirective.task.refreshDom.pipe(filter(c => this.magicDirective.IsSameElement(c))).subscribe(value => {
+            let command = value;
+            if (command.Operation === HtmlProperties.ItemsList)
+                this.onComboboxItemsListChanged();
+        });
     }
     onChange($event) {
         this.magicDirective.task.onComboboxSelectionChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
+    onComboboxItemsListChanged() {
+        this.magicDirective.task.refreshView();
+    }
 }
 ComboboxMagicDirective.ɵfac = function ComboboxMagicDirective_Factory(t) { return new (t || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
 ComboboxMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: ComboboxMagicDirective, selectors: [["select", "magic", "", 3, "multiple", ""]], hostBindings: function ComboboxMagicDirective_HostBindings(rf, ctx) {
@@ -4097,14 +4474,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;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset: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"
@@ -4123,38 +4497,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
@@ -4295,12 +4638,33 @@ const DATE_VALUE_ACCESSOR = {
     multi: true
 };
 class DateValueAccessor {
-    constructor(renderer, elementRef) {
+    onBlurEvent(event) {
+        const century = Environment.Instance.GetCentury(LastFocusedManager.Instance.getCurrTask().getCompIdx());
+        let control = this._task.getFormControl(this.magicDir.rowId, this.magicDir.id);
+        this.formatDateWithCentury(event.target.value, century, control);
+    }
+    constructor(renderer, elementRef, magicDir, _task) {
         this.renderer = renderer;
         this.elementRef = elementRef;
+        this.magicDir = magicDir;
+        this._task = _task;
         this.onChange = (_) => { };
         this.onTouched = () => { };
     }
+    formatDateWithCentury(userInput, century, control) {
+        const separator = userInput.includes('/') ? '/' : "-";
+        let centuryVal = parseInt(century.toString().slice(0, 2));
+        if (userInput.length == 0)
+            return;
+        const dateArray = userInput.split(separator);
+        const day = Number(dateArray[2]);
+        const month = Number(dateArray[1]);
+        const year = Number(dateArray[0]);
+        let updatedYear = year.toString().length === 2 ? (year < century % 100 ? centuryVal + 1 : centuryVal) + '' + year :
+            year.toString().length === 1 ? (year < century % 100 ? centuryVal + 1 : centuryVal) + '0' + year :
+                year;
+        control.setValue(new Date(`${updatedYear}${separator}${month}${separator}${day}`));
+    }
     writeValue(value) {
         if (!value) {
             this.renderer.setProperty(this.elementRef.nativeElement, "value", null);
@@ -4320,10 +4684,10 @@ class DateValueAccessor {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
 }
-DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+DateValueAccessor.ɵfac = function DateValueAccessor_Factory(t) { return new (t || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
 DateValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, selectors: [["", "dateInput", ""]], hostBindings: function DateValueAccessor_HostBindings(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵlistener("input", function DateValueAccessor_input_HostBindingHandler($event) { return ctx.onChange($event.target.valueAsDate); })("blur", function DateValueAccessor_blur_HostBindingHandler() { return ctx.onTouched(); });
+            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])] });
 (function () {
@@ -4333,16 +4697,24 @@ DateValueAccessor.ɵdir = i0.ɵɵdefineDirective({ type: DateValueAccessor, sele
                     selector: "[dateInput]",
                     providers: [DATE_VALUE_ACCESSOR]
                 }]
-        }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { onChange: [{
+        }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: MagicDirective }, { type: TaskMagicService }]; }, { onChange: [{
                 type: HostListener,
                 args: ["input", ["$event.target.valueAsDate"]]
             }], onTouched: [{
                 type: HostListener,
                 args: ["blur", []]
+            }], onBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
             }] });
 })();
 
 class NonMagicControlDirective {
+    set magic(val) {
+        this.id = val;
+        this.selector = 'NonMagicControl';
+    }
+    ;
     constructor(_task, element, renderer, vcRef) {
         this._task = _task;
         this.element = element;
@@ -4352,11 +4724,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;
     }
@@ -4388,6 +4755,38 @@ NonMagicControlDirective.ɵdir = i0.ɵɵdefineDirective({ type: NonMagicControlD
             }] });
 })();
 
+class Time24MagicPipe {
+    constructor(_task) {
+        this._task = _task;
+    }
+    transform(value, controlId) {
+        let mask = this._task.GetControlPictureMask(controlId).getMask();
+        if (typeof value !== "undefined" && mask !== null) {
+            const date = new Date(value);
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const seconds = date.getSeconds().toString().padStart(2, '0');
+            if (mask.length == 5) {
+                return `${hours}:${minutes}`;
+            }
+            else if (mask.length > 5) {
+                return `${hours}:${minutes}:${seconds}`;
+            }
+        }
+        return value;
+    }
+}
+Time24MagicPipe.ɵfac = function Time24MagicPipe_Factory(t) { return new (t || Time24MagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+Time24MagicPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "magicTime24", type: Time24MagicPipe, pure: true });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Time24MagicPipe, [{
+            type: Pipe,
+            args: [{
+                    name: 'magicTime24'
+                }]
+        }], function () { return [{ type: TaskMagicService }]; }, null);
+})();
+
 const decs = [
     MagicDirective,
     CheckboxMagicDirective,
@@ -4416,26 +4815,25 @@ const decs = [
     RangeValidatorMagicDirective,
     NonMagicControlDirective,
     MagicFocusDirective,
-    MagicViewContainerRef
+    MagicViewContainerRef,
+    Time24MagicPipe
 ];
 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, MaskitoModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
             type: NgModule,
             args: [{
                     declarations: [...decs],
-                    exports: [...decs],
+                    exports: [...decs, MaskitoModule],
                     entryComponents: [],
                     imports: [
                         CommonModule,
@@ -4477,7 +4875,8 @@ MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMa
             RangeValidatorMagicDirective,
             NonMagicControlDirective,
             MagicFocusDirective,
-            MagicViewContainerRef], imports: [CommonModule,
+            MagicViewContainerRef,
+            Time24MagicPipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
@@ -4509,7 +4908,8 @@ MagicModule.ɵinj = i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMa
             RangeValidatorMagicDirective,
             NonMagicControlDirective,
             MagicFocusDirective,
-            MagicViewContainerRef] });
+            MagicViewContainerRef,
+            Time24MagicPipe, MaskitoModule] });
 })();
 
 const MG_FORMATS = {
@@ -4696,5 +5096,5 @@ class ModalFormDefinition {
     }
 }
 
-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, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
+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