@magic-xpa/angular 4.1000.0 → 4.1000.410-0.428

package/fesm2015/magic-xpa-angular.mjs

@@ -8,8 +8,8 @@ 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';
@@ -756,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;
     }
@@ -1827,7 +1832,8 @@ class TaskMagicService {
             case CommandType.SET_PROPERTY:
                 this.handleSetProperty(command, isTableChild);
                 if (command.Operation == HtmlProperties.ReadOnly ||
-                    command.Operation == HtmlProperties.ItemsList)
+                    command.Operation == HtmlProperties.ItemsList ||
+                    command.Operation == HtmlProperties.CheckBoxIndeterminate)
                     this.refreshDom.next(command);
                 break;
             case CommandType.PROP_SET_USER_PROPERTY:
@@ -2067,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;
@@ -3508,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) {
@@ -3690,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); })("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); });
+            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 () {
@@ -3711,6 +3891,9 @@ MgformatMagicDirective.ɵdir = i0.ɵɵdefineDirective({ type: MgformatMagicDirec
             }], onChangeEvent: [{
                 type: HostListener,
                 args: ['change', ['$event']]
+            }], onBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
             }] });
 })();
 
@@ -3994,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,
@@ -4015,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']]
             }] });
@@ -4391,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);
@@ -4416,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 () {
@@ -4429,12 +4697,15 @@ 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']]
             }] });
 })();