@magic-xpa/angular 4.1100.0-dev4110.261 → 4.1100.0-dev4110.265
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.
- package/esm2022/src/services/task.magics.service.mjs +13 -2
- package/esm2022/src/ui/GuiInteractiveExecutor.mjs +7 -2
- package/esm2022/src/ui/directives/magic/checkbox.magic.directive.mjs +78 -7
- package/fesm2022/magic-xpa-angular.mjs +89 -7
- package/fesm2022/magic-xpa-angular.mjs.map +1 -1
- package/package.json +3 -3
- package/src/ui/directives/magic/checkbox.magic.directive.d.ts +15 -2
@@ -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,
|
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
|
-
|
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
|
-
|
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
|
-
|
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 }], {
|
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
|
}] }); })();
|