@magic-xpa/angular 4.1100.0-dev4110.261 → 4.1100.0-dev4110.267

package/fesm2022/magic-xpa-angular.mjs

@@ -8,7 +8,7 @@ import { NavigationEnd, 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 { 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';
@@ -768,6 +768,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;
     }
@@ -1857,7 +1862,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:
@@ -2097,6 +2103,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;
@@ -4193,16 +4209,80 @@ class ErrorMagicComponent {
 
 class CheckboxMagicDirective {
     magicDirective;
-    constructor(magicDirective) {
+    el;
+    task;
+    threeState = false;
+    subscribeRefreshDom = null;
+    isIndeterminate = false;
+    constructor(magicDirective, el, task) {
         this.magicDirective = magicDirective;
+        this.el = el;
+        this.task = task;
     }
     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);
+            }
+        });
     }
-    static ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    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();
+    }
+    static ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
     static ɵ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" } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
         type: Directive,
@@ -4211,7 +4291,9 @@ class CheckboxMagicDirective {
     input[type=checkbox][magic]:not([noFormControl])
 `,
             }]
-    }], () => [{ type: MagicDirective }], { onChange: [{
+    }], () => [{ type: MagicDirective }, { type: i0.ElementRef }, { type: TaskMagicService }], { threeState: [{
+            type: Input
+        }], onChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }] }); })();