@3kles/kles-material-dynamicforms 19.5.0 → 19.5.2

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, computed, EventEmitter, Output, NgModule, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+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';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -134,6 +134,8 @@ class KlesFormControl extends KlesAbstractFormControl {
 class AbstractUiState {
     constructor() {
         this._value = signal(undefined);
+        this._parent = null;
+        this._parentKey = null;
     }
     get(path) {
         let currPath = path;
@@ -151,6 +153,18 @@ class AbstractUiState {
     get value() {
         return this._value.asReadonly();
     }
+    setParent(parent, key) {
+        this._parent = parent;
+        this._parentKey = key;
+    }
+    notifyParent() {
+        if (this._parent && this._parentKey != null) {
+            this._parent.childValueChanged(this._parentKey, this._value());
+        }
+    }
+    childValueChanged(key, value) {
+        // par défaut, rien
+    }
 }
 
 class ControlUiState extends AbstractUiState {
@@ -160,8 +174,12 @@ class ControlUiState extends AbstractUiState {
             this._value.set(value);
         }
     }
+    get value() {
+        return this._value.asReadonly();
+    }
     setValue(value) {
         this._value.set(value);
+        this.notifyParent();
     }
     patchValue(value) {
         if (value == null) {
@@ -173,6 +191,7 @@ class ControlUiState extends AbstractUiState {
             return;
         }
         this._value.set({ ...curr, ...value });
+        this.notifyParent();
     }
 }
 
@@ -328,11 +347,23 @@ class KlesDynamicFieldDirective {
         this.buildComponent();
     }
     ngOnChanges(changes) {
-        if (changes.group && !changes.group.isFirstChange()) {
-            this.group = changes.group.currentValue;
+        const groupChanged = !!changes['group'] && !changes['group'].isFirstChange();
+        const fieldChanged = !!changes['field'] && !changes['field'].isFirstChange();
+        const uiChanged = !!changes['ui'] && !changes['ui'].isFirstChange();
+        const siblingFieldsChanged = !!changes['siblingFields'] && !changes['siblingFields'].isFirstChange();
+        if (groupChanged) {
+            this.group = changes['group'].currentValue;
         }
-        if (changes.field && !changes.field?.isFirstChange()) {
-            this.field = changes.field.currentValue;
+        if (fieldChanged) {
+            this.field = changes['field'].currentValue;
+        }
+        if (uiChanged) {
+            this.ui = changes['ui'].currentValue;
+        }
+        if (siblingFieldsChanged) {
+            this.siblingFields = changes['siblingFields'].currentValue;
+        }
+        if (groupChanged || fieldChanged || uiChanged || siblingFieldsChanged) {
             this.buildComponent();
         }
     }
@@ -531,31 +562,48 @@ class GroupUiState extends AbstractUiState {
     constructor(states) {
         super();
         this.states = {};
-        this._computedValue = computed(() => {
-            return this._snapshot();
-        });
         this.states = (states ?? {});
-        this._value.set(this._snapshot());
+        for (const key of Object.keys(this.states)) {
+            const state = this.states[key];
+            state?.setParent(this, key);
+        }
+        this._value.set(this.buildInitialValue());
     }
     setValue(value) {
         if (value == null)
             return;
-        Object.keys(value).forEach((name) => {
-            this.states[name]?.setValue(value[name]);
-        });
+        for (const name of Object.keys(value)) {
+            const state = this.states[name];
+            if (state) {
+                state.setValue(value[name]);
+            }
+        }
         this._value.set(value);
+        this.notifyParent();
     }
     patchValue(value) {
         if (value == null)
             return;
-        Object.keys(value).forEach((name) => {
+        for (const name of Object.keys(value)) {
             const state = this.states[name];
             if (state) {
                 state.patchValue(value[name]);
             }
+        }
+        const curr = this._value() ?? {};
+        this._value.set({
+            ...curr,
+            ...value,
         });
+        this.notifyParent();
+    }
+    childValueChanged(key, value) {
         const curr = this._value() ?? {};
-        this._value.set({ ...curr, ...value });
+        this._value.set({
+            ...curr,
+            [key]: value,
+        });
+        this.notifyParent();
     }
     _find(name) {
         const key = String(name);
@@ -564,13 +612,15 @@ class GroupUiState extends AbstractUiState {
     }
     addUiState(name, uiState) {
         this.states[name] = uiState;
+        uiState.setParent(this, name);
         const curr = this._value() ?? {};
-        this._value.set({ ...curr, [name]: uiState.value() });
-    }
-    get value() {
-        return this._computedValue;
+        this._value.set({
+            ...curr,
+            [name]: uiState.value(),
+        });
+        this.notifyParent();
     }
-    _snapshot() {
+    buildInitialValue() {
         const out = {};
         for (const key of Object.keys(this.states)) {
             out[key] = this.states[key]?.value();
@@ -4327,14 +4377,11 @@ class ArrayUiState extends AbstractUiState {
     constructor(states) {
         super();
         this.states = [];
-        this._computedValue = computed(() => {
-            return this.states.map((s) => s.value());
-        });
         this.states = states ?? [];
-        this._value.set(this.states.map((s) => s.value()));
-    }
-    get value() {
-        return this._computedValue;
+        this.states.forEach((state, index) => {
+            state.setParent(this, index);
+        });
+        this._value.set(this.states.map((state) => state.value()));
     }
     setValue(value) {
         if (!Array.isArray(value)) {
@@ -4344,6 +4391,7 @@ class ArrayUiState extends AbstractUiState {
             this.at(index)?.setValue(newValue);
         });
         this._value.set(value);
+        this.notifyParent();
     }
     patchValue(value) {
         if (value == null) {
@@ -4357,8 +4405,24 @@ class ArrayUiState extends AbstractUiState {
         });
         const curr = this._value() ?? [];
         const next = [...curr];
-        value.forEach((v, i) => (next[i] = v));
+        value.forEach((newValue, index) => {
+            next[index] = {
+                ...(next[index] ?? {}),
+                ...newValue,
+            };
+        });
+        this._value.set(next);
+        this.notifyParent();
+    }
+    childValueChanged(key, value) {
+        const index = typeof key === 'number' ? key : Number(key);
+        if (!Number.isInteger(index) || index < 0)
+            return;
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        next[index] = value;
         this._value.set(next);
+        this.notifyParent();
     }
     at(index) {
         return this.states?.[index] ?? null;
@@ -4368,15 +4432,51 @@ class ArrayUiState extends AbstractUiState {
         return Number.isFinite(idx) ? this.at(idx) : null;
     }
     push(control) {
-        if (Array.isArray(control)) {
-            control.forEach((ctrl) => {
-                this.states.push(ctrl);
-            });
+        const items = Array.isArray(control) ? control : [control];
+        if (items.length === 0) {
+            return;
         }
-        else {
-            this.states.push(control);
+        for (const item of items) {
+            const index = this.states.length;
+            this.states.push(item);
+            item.setParent(this, index);
         }
         this._value.set(this.states.map((s) => s.value()));
+        this.notifyParent();
+    }
+    insert(index, state) {
+        const items = Array.isArray(state) ? state : [state];
+        if (items.length === 0) {
+            return;
+        }
+        const safeIndex = Math.max(0, Math.min(index, this.states.length));
+        this.states.splice(safeIndex, 0, ...items);
+        for (let i = safeIndex; i < this.states.length; i++) {
+            this.states[i]?.setParent(this, i);
+        }
+        const curr = this._value();
+        const next = [...curr];
+        next.splice(safeIndex, 0, ...items.map((item) => item.value()));
+        this._value.set(next);
+        this.notifyParent();
+    }
+    removeAt(index) {
+        if (index < 0 || index >= this.states.length)
+            return;
+        this.states.splice(index, 1);
+        this.states.forEach((state, i) => {
+            state.setParent(this, i);
+        });
+        const curr = this._value() ?? [];
+        const next = [...curr];
+        next.splice(index, 1);
+        this._value.set(next);
+        this.notifyParent();
+    }
+    clear() {
+        this.states.length = 0;
+        this._value.set([]);
+        this.notifyParent();
     }
 }