@3kles/kles-material-dynamicforms 19.5.0 → 19.5.1
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/fesm2022/3kles-kles-material-dynamicforms.mjs +117 -29
- package/fesm2022/3kles-kles-material-dynamicforms.mjs.map +1 -1
- package/lib/ui/ui-state/array-ui-state.d.ts +4 -3
- package/lib/ui/ui-state/control-ui-state.d.ts +2 -0
- package/lib/ui/ui-state/group-ui-state.d.ts +3 -5
- package/lib/ui/ui-state/ui-state.abstract.d.ts +6 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable,
|
|
2
|
+
import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -134,6 +134,8 @@ class KlesFormControl extends KlesAbstractFormControl {
|
|
|
134
134
|
class AbstractUiState {
|
|
135
135
|
constructor() {
|
|
136
136
|
this._value = signal(undefined);
|
|
137
|
+
this._parent = null;
|
|
138
|
+
this._parentKey = null;
|
|
137
139
|
}
|
|
138
140
|
get(path) {
|
|
139
141
|
let currPath = path;
|
|
@@ -151,6 +153,18 @@ class AbstractUiState {
|
|
|
151
153
|
get value() {
|
|
152
154
|
return this._value.asReadonly();
|
|
153
155
|
}
|
|
156
|
+
setParent(parent, key) {
|
|
157
|
+
this._parent = parent;
|
|
158
|
+
this._parentKey = key;
|
|
159
|
+
}
|
|
160
|
+
notifyParent() {
|
|
161
|
+
if (this._parent && this._parentKey != null) {
|
|
162
|
+
this._parent.childValueChanged(this._parentKey, this._value());
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
childValueChanged(key, value) {
|
|
166
|
+
// par défaut, rien
|
|
167
|
+
}
|
|
154
168
|
}
|
|
155
169
|
|
|
156
170
|
class ControlUiState extends AbstractUiState {
|
|
@@ -160,8 +174,12 @@ class ControlUiState extends AbstractUiState {
|
|
|
160
174
|
this._value.set(value);
|
|
161
175
|
}
|
|
162
176
|
}
|
|
177
|
+
get value() {
|
|
178
|
+
return this._value.asReadonly();
|
|
179
|
+
}
|
|
163
180
|
setValue(value) {
|
|
164
181
|
this._value.set(value);
|
|
182
|
+
this.notifyParent();
|
|
165
183
|
}
|
|
166
184
|
patchValue(value) {
|
|
167
185
|
if (value == null) {
|
|
@@ -173,6 +191,7 @@ class ControlUiState extends AbstractUiState {
|
|
|
173
191
|
return;
|
|
174
192
|
}
|
|
175
193
|
this._value.set({ ...curr, ...value });
|
|
194
|
+
this.notifyParent();
|
|
176
195
|
}
|
|
177
196
|
}
|
|
178
197
|
|
|
@@ -531,31 +550,48 @@ class GroupUiState extends AbstractUiState {
|
|
|
531
550
|
constructor(states) {
|
|
532
551
|
super();
|
|
533
552
|
this.states = {};
|
|
534
|
-
this._computedValue = computed(() => {
|
|
535
|
-
return this._snapshot();
|
|
536
|
-
});
|
|
537
553
|
this.states = (states ?? {});
|
|
538
|
-
|
|
554
|
+
for (const key of Object.keys(this.states)) {
|
|
555
|
+
const state = this.states[key];
|
|
556
|
+
state?.setParent(this, key);
|
|
557
|
+
}
|
|
558
|
+
this._value.set(this.buildInitialValue());
|
|
539
559
|
}
|
|
540
560
|
setValue(value) {
|
|
541
561
|
if (value == null)
|
|
542
562
|
return;
|
|
543
|
-
Object.keys(value)
|
|
544
|
-
this.states[name]
|
|
545
|
-
|
|
563
|
+
for (const name of Object.keys(value)) {
|
|
564
|
+
const state = this.states[name];
|
|
565
|
+
if (state) {
|
|
566
|
+
state.setValue(value[name]);
|
|
567
|
+
}
|
|
568
|
+
}
|
|
546
569
|
this._value.set(value);
|
|
570
|
+
this.notifyParent();
|
|
547
571
|
}
|
|
548
572
|
patchValue(value) {
|
|
549
573
|
if (value == null)
|
|
550
574
|
return;
|
|
551
|
-
Object.keys(value)
|
|
575
|
+
for (const name of Object.keys(value)) {
|
|
552
576
|
const state = this.states[name];
|
|
553
577
|
if (state) {
|
|
554
578
|
state.patchValue(value[name]);
|
|
555
579
|
}
|
|
580
|
+
}
|
|
581
|
+
const curr = this._value() ?? {};
|
|
582
|
+
this._value.set({
|
|
583
|
+
...curr,
|
|
584
|
+
...value,
|
|
556
585
|
});
|
|
586
|
+
this.notifyParent();
|
|
587
|
+
}
|
|
588
|
+
childValueChanged(key, value) {
|
|
557
589
|
const curr = this._value() ?? {};
|
|
558
|
-
this._value.set({
|
|
590
|
+
this._value.set({
|
|
591
|
+
...curr,
|
|
592
|
+
[key]: value,
|
|
593
|
+
});
|
|
594
|
+
this.notifyParent();
|
|
559
595
|
}
|
|
560
596
|
_find(name) {
|
|
561
597
|
const key = String(name);
|
|
@@ -564,13 +600,15 @@ class GroupUiState extends AbstractUiState {
|
|
|
564
600
|
}
|
|
565
601
|
addUiState(name, uiState) {
|
|
566
602
|
this.states[name] = uiState;
|
|
603
|
+
uiState.setParent(this, name);
|
|
567
604
|
const curr = this._value() ?? {};
|
|
568
|
-
this._value.set({
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
605
|
+
this._value.set({
|
|
606
|
+
...curr,
|
|
607
|
+
[name]: uiState.value(),
|
|
608
|
+
});
|
|
609
|
+
this.notifyParent();
|
|
572
610
|
}
|
|
573
|
-
|
|
611
|
+
buildInitialValue() {
|
|
574
612
|
const out = {};
|
|
575
613
|
for (const key of Object.keys(this.states)) {
|
|
576
614
|
out[key] = this.states[key]?.value();
|
|
@@ -4327,14 +4365,11 @@ class ArrayUiState extends AbstractUiState {
|
|
|
4327
4365
|
constructor(states) {
|
|
4328
4366
|
super();
|
|
4329
4367
|
this.states = [];
|
|
4330
|
-
this._computedValue = computed(() => {
|
|
4331
|
-
return this.states.map((s) => s.value());
|
|
4332
|
-
});
|
|
4333
4368
|
this.states = states ?? [];
|
|
4334
|
-
this.
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4369
|
+
this.states.forEach((state, index) => {
|
|
4370
|
+
state.setParent(this, index);
|
|
4371
|
+
});
|
|
4372
|
+
this._value.set(this.states.map((state) => state.value()));
|
|
4338
4373
|
}
|
|
4339
4374
|
setValue(value) {
|
|
4340
4375
|
if (!Array.isArray(value)) {
|
|
@@ -4344,6 +4379,7 @@ class ArrayUiState extends AbstractUiState {
|
|
|
4344
4379
|
this.at(index)?.setValue(newValue);
|
|
4345
4380
|
});
|
|
4346
4381
|
this._value.set(value);
|
|
4382
|
+
this.notifyParent();
|
|
4347
4383
|
}
|
|
4348
4384
|
patchValue(value) {
|
|
4349
4385
|
if (value == null) {
|
|
@@ -4357,8 +4393,24 @@ class ArrayUiState extends AbstractUiState {
|
|
|
4357
4393
|
});
|
|
4358
4394
|
const curr = this._value() ?? [];
|
|
4359
4395
|
const next = [...curr];
|
|
4360
|
-
value.forEach((
|
|
4396
|
+
value.forEach((newValue, index) => {
|
|
4397
|
+
next[index] = {
|
|
4398
|
+
...(next[index] ?? {}),
|
|
4399
|
+
...newValue,
|
|
4400
|
+
};
|
|
4401
|
+
});
|
|
4361
4402
|
this._value.set(next);
|
|
4403
|
+
this.notifyParent();
|
|
4404
|
+
}
|
|
4405
|
+
childValueChanged(key, value) {
|
|
4406
|
+
const index = typeof key === 'number' ? key : Number(key);
|
|
4407
|
+
if (!Number.isInteger(index) || index < 0)
|
|
4408
|
+
return;
|
|
4409
|
+
const curr = this._value() ?? [];
|
|
4410
|
+
const next = [...curr];
|
|
4411
|
+
next[index] = value;
|
|
4412
|
+
this._value.set(next);
|
|
4413
|
+
this.notifyParent();
|
|
4362
4414
|
}
|
|
4363
4415
|
at(index) {
|
|
4364
4416
|
return this.states?.[index] ?? null;
|
|
@@ -4368,15 +4420,51 @@ class ArrayUiState extends AbstractUiState {
|
|
|
4368
4420
|
return Number.isFinite(idx) ? this.at(idx) : null;
|
|
4369
4421
|
}
|
|
4370
4422
|
push(control) {
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
});
|
|
4423
|
+
const items = Array.isArray(control) ? control : [control];
|
|
4424
|
+
if (items.length === 0) {
|
|
4425
|
+
return;
|
|
4375
4426
|
}
|
|
4376
|
-
|
|
4377
|
-
this.states.
|
|
4427
|
+
for (const item of items) {
|
|
4428
|
+
const index = this.states.length;
|
|
4429
|
+
this.states.push(item);
|
|
4430
|
+
item.setParent(this, index);
|
|
4378
4431
|
}
|
|
4379
4432
|
this._value.set(this.states.map((s) => s.value()));
|
|
4433
|
+
this.notifyParent();
|
|
4434
|
+
}
|
|
4435
|
+
insert(index, state) {
|
|
4436
|
+
const items = Array.isArray(state) ? state : [state];
|
|
4437
|
+
if (items.length === 0) {
|
|
4438
|
+
return;
|
|
4439
|
+
}
|
|
4440
|
+
const safeIndex = Math.max(0, Math.min(index, this.states.length));
|
|
4441
|
+
this.states.splice(safeIndex, 0, ...items);
|
|
4442
|
+
for (let i = safeIndex; i < this.states.length; i++) {
|
|
4443
|
+
this.states[i]?.setParent(this, i);
|
|
4444
|
+
}
|
|
4445
|
+
const curr = this._value();
|
|
4446
|
+
const next = [...curr];
|
|
4447
|
+
next.splice(safeIndex, 0, ...items.map((item) => item.value()));
|
|
4448
|
+
this._value.set(next);
|
|
4449
|
+
this.notifyParent();
|
|
4450
|
+
}
|
|
4451
|
+
removeAt(index) {
|
|
4452
|
+
if (index < 0 || index >= this.states.length)
|
|
4453
|
+
return;
|
|
4454
|
+
this.states.splice(index, 1);
|
|
4455
|
+
this.states.forEach((state, i) => {
|
|
4456
|
+
state.setParent(this, i);
|
|
4457
|
+
});
|
|
4458
|
+
const curr = this._value() ?? [];
|
|
4459
|
+
const next = [...curr];
|
|
4460
|
+
next.splice(index, 1);
|
|
4461
|
+
this._value.set(next);
|
|
4462
|
+
this.notifyParent();
|
|
4463
|
+
}
|
|
4464
|
+
clear() {
|
|
4465
|
+
this.states.length = 0;
|
|
4466
|
+
this._value.set([]);
|
|
4467
|
+
this.notifyParent();
|
|
4380
4468
|
}
|
|
4381
4469
|
}
|
|
4382
4470
|
|