@magic-xpa/angular 4.900.0-dev490.8 → 4.900.0-dev490.80

package/fesm2020/magic-xpa-angular.mjs

@@ -10,7 +10,7 @@ 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, BindingLevel, StorageAttributeType, MgControlType, PICInterface } from '@magic-xpa/utils';
 import { filter, map, debounceTime } from 'rxjs/operators';
 import { Subject, fromEvent } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
@@ -1961,7 +1961,7 @@ class TaskMagicService {
                     return val;
             }
             case StorageAttribute.NUMERIC:
-                return (val === null) ? 0 : val;
+                return val;
             default:
                 return val;
         }
@@ -2778,16 +2778,16 @@ 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';
+        this.selector = "magic";
     }
     ;
     set eventsOnly(val) {
-        console.log('eventsOnly');
+        console.log("eventsOnly");
         this.eventsOnlyVal = true;
     }
     ;
@@ -2795,11 +2795,11 @@ class MagicDirective {
         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;
@@ -2810,15 +2810,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) {
@@ -2827,8 +2827,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;
@@ -2854,7 +2854,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) {
@@ -2874,7 +2874,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);
@@ -2902,7 +2902,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;
         }
     }
@@ -2912,13 +2912,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);
@@ -2930,10 +2930,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;
         }
     }
@@ -2948,16 +2951,16 @@ MagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MagicDirective, selectors:
 (function () { (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: [{
                 type: Optional
             }] }]; }, { magic: [{
             type: Input,
-            args: ['magic']
+            args: ["magic"]
         }], eventsOnly: [{
             type: Input,
-            args: ['eventsOnly']
+            args: ["eventsOnly"]
         }], rowId: [{
             type: Input
         }] }); })();
@@ -3255,6 +3258,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;
@@ -3269,28 +3291,13 @@ class MgformatMagicDirective {
                 }
                 else {
                     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())]);
+                        control.setValidators(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());
@@ -3439,7 +3446,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 () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgformatMagicDirective, [{
         type: Directive,
@@ -3449,6 +3456,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']]