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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,7 +8,7 @@ import { NavigationEnd, RouterModule } from '@angular/router';
8
8
  import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
9
9
  import * as i3 from 'ng-dynamic-component';
10
10
  import { DynamicModule } from 'ng-dynamic-component';
11
- import { InteractiveCommandType, OverlayType, Styles, HtmlProperties, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
11
+ import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, Modifiers } from '@magic-xpa/gui';
12
12
  import { MagicBridge, getGuiEventObj, CookieService, Environment, LastFocusedManager } from '@magic-xpa/engine';
13
13
  import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
14
14
  import { filter, map, debounceTime } from 'rxjs/operators';
@@ -768,6 +768,11 @@ class GuiInteractiveExecutor {
768
768
  }
769
769
  else if (this.task.isTableControl(this.command.controlName))
770
770
  val = this.task.getValue(this.command.controlName, guiRowId.toString());
771
+ if (this.command._boolVal) {
772
+ const indeterminate = this.task.getProperty(this.command.controlName, HtmlProperties.CheckBoxIndeterminate, guiRowId.toString());
773
+ if (indeterminate)
774
+ val = null;
775
+ }
771
776
  val = this.task.ConvertValToNative(this.command.controlName, guiRowId, val);
772
777
  this.command._mgValue.obj = val;
773
778
  }
@@ -1857,7 +1862,8 @@ class TaskMagicService {
1857
1862
  case CommandType.SET_PROPERTY:
1858
1863
  this.handleSetProperty(command, isTableChild);
1859
1864
  if (command.Operation == HtmlProperties.ReadOnly ||
1860
- command.Operation == HtmlProperties.ItemsList)
1865
+ command.Operation == HtmlProperties.ItemsList ||
1866
+ command.Operation == HtmlProperties.CheckBoxIndeterminate)
1861
1867
  this.refreshDom.next(command);
1862
1868
  break;
1863
1869
  case CommandType.PROP_SET_USER_PROPERTY:
@@ -2097,6 +2103,16 @@ class TaskMagicService {
2097
2103
  if (typeof (event) == 'boolean') {
2098
2104
  guiEvent.Value = event;
2099
2105
  }
2106
+ else if (typeof (event) == 'string') {
2107
+ if (event == "unchecked") {
2108
+ guiEvent.Value = false;
2109
+ }
2110
+ else if (event == 'indeterminate')
2111
+ guiEvent.Value = null;
2112
+ else if (event == 'checked') {
2113
+ guiEvent.Value = true;
2114
+ }
2115
+ }
2100
2116
  else {
2101
2117
  if (typeof event.target === 'undefined')
2102
2118
  guiEvent.Value = (event).checked;
@@ -4193,16 +4209,80 @@ class ErrorMagicComponent {
4193
4209
 
4194
4210
  class CheckboxMagicDirective {
4195
4211
  magicDirective;
4196
- constructor(magicDirective) {
4212
+ el;
4213
+ task;
4214
+ threeState = false;
4215
+ subscribeRefreshDom = null;
4216
+ isIndeterminate = false;
4217
+ constructor(magicDirective, el, task) {
4197
4218
  this.magicDirective = magicDirective;
4219
+ this.el = el;
4220
+ this.task = task;
4198
4221
  }
4199
4222
  onChange($event) {
4200
- this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
4223
+ if (this.threeState) {
4224
+ this.handleThreeState();
4225
+ }
4226
+ else {
4227
+ this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
4228
+ }
4229
+ }
4230
+ ngOnInit() {
4231
+ if (this.threeState) {
4232
+ let guiEvent = getGuiEventObj("setAsThreeState", this.magicDirective.id, +this.magicDirective.rowId);
4233
+ this.task.insertEvent(guiEvent);
4234
+ this.el.nativeElement.indeterminate = this.isIndeterminate = this.task.getProperty(this.magicDirective.id, HtmlProperties.CheckBoxIndeterminate, this.magicDirective.rowId);
4235
+ this.regUpdatesUI();
4236
+ }
4237
+ }
4238
+ regUpdatesUI() {
4239
+ this.subscribeRefreshDom = this.task
4240
+ .refreshDom.pipe(filter(c => this.magicDirective.IsSameElement(c)))
4241
+ .subscribe(a => {
4242
+ let command = a;
4243
+ try {
4244
+ this.handleCommand(command);
4245
+ }
4246
+ catch (ex) {
4247
+ console.dir(ex);
4248
+ }
4249
+ });
4201
4250
  }
4202
- static ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
4251
+ handleCommand(command) {
4252
+ if (command.CommandType == CommandType.SET_PROPERTY &&
4253
+ command.Operation == HtmlProperties.CheckBoxIndeterminate) {
4254
+ this.isIndeterminate = this.el.nativeElement.indeterminate = command.obj1;
4255
+ }
4256
+ }
4257
+ handleThreeState() {
4258
+ let value = '';
4259
+ let prevCheckedValue = this.task.getValue(this.magicDirective.id, this.magicDirective.rowId);
4260
+ const checkbox = this.el.nativeElement;
4261
+ if (this.isIndeterminate) {
4262
+ checkbox.checked = false;
4263
+ checkbox.indeterminate = false;
4264
+ value = 'unchecked';
4265
+ }
4266
+ else if (prevCheckedValue) {
4267
+ checkbox.checked = false;
4268
+ checkbox.indeterminate = true;
4269
+ value = 'indeterminate';
4270
+ }
4271
+ else if (!prevCheckedValue) {
4272
+ checkbox.checked = true;
4273
+ checkbox.indeterminate = false;
4274
+ value = 'checked';
4275
+ }
4276
+ this.magicDirective.task.onCheckChanged(value, this.magicDirective.id, +this.magicDirective.rowId);
4277
+ }
4278
+ ngOnDestroy() {
4279
+ if (this.subscribeRefreshDom !== null)
4280
+ this.subscribeRefreshDom.unsubscribe();
4281
+ }
4282
+ static ɵfac = function CheckboxMagicDirective_Factory(t) { return new (t || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
4203
4283
  static ɵdir = i0.ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
4204
4284
  i0.ɵɵlistener("change", function CheckboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
4205
- } } });
4285
+ } }, inputs: { threeState: "threeState" } });
4206
4286
  }
4207
4287
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxMagicDirective, [{
4208
4288
  type: Directive,
@@ -4211,7 +4291,9 @@ class CheckboxMagicDirective {
4211
4291
  input[type=checkbox][magic]:not([noFormControl])
4212
4292
  `,
4213
4293
  }]
4214
- }], () => [{ type: MagicDirective }], { onChange: [{
4294
+ }], () => [{ type: MagicDirective }, { type: i0.ElementRef }, { type: TaskMagicService }], { threeState: [{
4295
+ type: Input
4296
+ }], onChange: [{
4215
4297
  type: HostListener,
4216
4298
  args: ['change', ['$event']]
4217
4299
  }] }); })();